THREE.JS / FOUNDATIONS 150

Turn paths into places.

Load a real local SVG, convert its paths into ShapeGeometry and stroke meshes, then let desktop pointer events and XR controller events share one selection contract.

Initializing Preparing renderer

Preparing the WebGPU/WebGL2 scene, local SVG asset, and interactive group...

selection: -
paths: -
shapes: -
triangles: -
draws: -
XR hook: -

Asset rebuildloadAsync -> path.toShapes()

Curve segments

Each card's invisible hit plane is a direct child of InteractiveGroup; SVG content stays owned by the scene graph.

Local SVG assetloading

The loader stays local to this repository so the study is deterministic and offline-friendly.

study-mark.svgfills, hole, and stroked subpaths

Interaction boundarywaiting

InteractiveGroup children-

SVG geometry/materials-

XR controller listeners-

Pointer selection is verified on desktop. The XR listener is installed and ready for an immersive session; this browser has no headset input to exercise physically.

Click a glowing SVG card in the scene. Try ?forceWebGL=1 for the WebGL2 companion. The XR button is intentionally a lifecycle hook, not a claim that a headset is connected.

THREE.JS FOUNDATIONS LAB