THREE.JS / FOUNDATIONS 188

Three ways to see a hand.

The official hand-model factory supports boxes, spheres, and mesh profiles. This study keeps all three model contracts alive, drives 25 synthetic joints per hand on desktop, and reserves the real VR path for a headset with the hand-tracking feature.

Initializing Preparing renderer

Preparing XR hands, controller grips, profile models, and joint state...

mode
-
hands
-
profile
-
joints
-
pinches
-
asset
-
draws
-
frames
-
XR entry pointdesktop

The virtual path dispatches WebXR-style hand connection data with a synthetic joint map; it is a contract harness, not physical hand-tracking evidence.

Profile selectorboxes active

Change the active profile directly or dispatch pinchend to cycle boxes -> spheres -> mesh, matching the official example’s profile-switch contract.

Profile contractsfactory boundary
boxesXRHandPrimitiveModel / box
spheresXRHandPrimitiveModel / sphere
meshXRHandMeshModel / GLTF asset

The mesh row uses a local procedural SkinnedMesh fixture so desktop QA does not depend on the external generic-hand asset URL. The factory, joint names, and update path remain the official ones.

Hand tracewaiting
No hand events yet.
active hand-
model state-

The trace records connection, profile changes, pinchend cycles, and cleanup boundaries.

Capability boundaryprobing
WebXR API-
immersive VR-
hand-tracking feature-
reference space-

Desktop joint simulation validates model selection and lifecycle accounting; headset joint poses, profile negotiation, hand confidence, and frame timing still require a physical device.

The VR button requests hand-tracking. Use ?forceWebGL=1 for the WebGL2 companion. The page does not claim headset parity from its desktop fixture.

THREE.JS FOUNDATIONS LAB