THREE.JS / FOUNDATIONS 190

Point. Transform. Release.

Follow the official XR bridge: a controller ray selects a mesh, the TransformControls helper becomes interactive, and selectstart, move, and selectend are forwarded through the control's XR raycaster.

Initializing Preparing renderer

Preparing the scene, transform gizmo, controller spaces, and XR session entry point...

mode: -
controllers: -
target: -
transform: -
axis: -
dragging: -
ray hits: -
events: -
draws: -
frames: -

Desktop controller harnesssame XR listeners

Target Mode

Connect a virtual controller, aim at a target, select it, then send selectstart, move, and selectend.

Event sequencewaiting

No controller events yet.

active controller-

target-ray mode-

ownershipscene group

object changes0

The log records the last eight controller and TransformControls transitions.

TransformControls contractaddon boundary

setFromXRController(controller)aim the raycaster

attach(object)show the helper

getRaycaster()share XR input

pointerDown / Move / Up(null)forward XR gestures

The desktop buttons dispatch the same EventDispatcher events used by an immersive controller. A synthetic XYZ axis and small move assist make the pointer path deterministic when no physical gizmo ray is available.

Capability boundaryprobing

WebXR API-

immersive VR-

XRButton-

reference space-

Desktop paths verify raycasting, ownership, and transform forwarding; physical controller pose, input profiles, and immersive frame timing still require a headset.

The XR button is a real session entry point. Use ?forceWebGL=1 for the WebGL2 companion; desktop controller paths are labeled simulation.

THREE.JS FOUNDATIONS LAB