Скачать или смотреть Point-Cloud Morphs in WebXR (Three.js) — XR Transitions, Auto-Orbit, XR Controllers 1/2

Explore a WebXR experience where a GPU-driven point cloud smoothly morphs between procedural shapes (sphere, cube, torus, pyramid, icosphere, cylinder, flat circle/square, point) using several transition styles: classic ease morph, swirl morph, bezier flow, staggered build, and dissolve/rebuild. Built with Three.js and lil-gui, the scene runs on desktop, VR headsets, and AR devices with floor-aligned placement and controller support.

What it does
• Renders tens of thousands of points with per-vertex color and size attenuation
• Morphs between shapes with multiple motion paths (ease, swirl, bezier, stagger)
• Dissolves outward then rebuilds the next target cloud
• Auto-orbits on desktop when idle; pauses auto-orbit while OrbitControls are used
• WebXR AR mode auto-places the cloud ~0.6 m in front of the headset and scales it ~5× smaller for eye-comfort; uses screen-space point sizing for visibility over passthrough
• WebXR VR mode uses world-space sizing and additive/normal blending
• Floor grid/plane are anchored to the real floor (local-floor reference space)
• XR controller trigger advances to the next target shape; squeeze to recenter AR placement

Controls (desktop)
• Space — trigger transition to current target shape
• 1..5 — switch transition mode (morph, swirl, bezier, dissolve/rebuild, staggered)
• C — toggle target (sphere ↔ cube)
• R — reshuffle point pairing for a fresh morph path
• P — pause/resume animation
• F — fullscreen
• X — recenter AR placement (when in XR session)

Controls (XR)
• Trigger — next target shape
• Squeeze — recenter AR placement to current head pose

GUI (lil-gui)
• Mode, Points, Point Size, Duration, Swirl Turns, Bezier Arc, Dissolve ms
• Color Crossfade, Palette (ice/magma/plasma/viridis/rainbow), Additive Blend
• Target Shape (sphere, cube, torus, pyramid, icosphere, cylinder, point, flat-circle, flat-square)
• AR Placement: Distance, Scale, Y Offset, Recenter button

Tech details
• Three.js r180 modules, OrbitControls, XRButton/ARButton, XRControllerModelFactory
• Single THREE.Points with dynamic BufferGeometry (positions/colors)
• Low-discrepancy pairing (Halton) for visually even source→target mapping
• Screen-space point sizing in AR for crisp passthrough overlays; world-space in VR/desktop
• Reference space: local-floor for consistent floor alignment in XR

Getting started

Serve the page over HTTPS (required by WebXR on most devices).

Open on desktop to try the auto-orbit + keyboard controls.

On a headset (Quest, etc.), launch in the browser and press the XR/AR button.

Use trigger to cycle shapes; squeeze to recenter.

Adjust AR Placement in the GUI if needed.

Troubleshooting
• No AR button: device/browser may not support immersive-ar. VR will still work if supported.
• Points look too big/small in AR: tweak AR Scale and Point Size; enable/disable additive blend.
• Floor height off: ensure XR reference space is local-floor; use Recenter (squeeze/X).

#WebXR #ThreeJS #AR #VR #MixedReality #PointCloud #CreativeCoding #JavaScript #Graphics #ShaderArt #ImmersiveWeb