Setting AR Session Origin in Three.js WebXR

When working with AR sessions in Three.js, the origin point is typically determined by the XR system when the session is initialized. For Quest headsets, this is often set to the headset's position at the start of the session, which can be inconvenient for your application.

There are a few approaches to handle this issue:

1. Reset the Scene Origin

You can transform your entire scene to adjust for the difference between the default origin and your desired origin:

JAVASCRIPTCopied
function resetOrigin(desiredOrigin) {
  // Create a group to hold all your scene objects
  const sceneGroup = new THREE.Group();
  
  // Add all your objects to this group instead of directly to the scene
  // scene.add(yourObject) becomes sceneGroup.add(yourObject)
  
  // Add the group to the scene
  scene.add(sceneGroup);
  
  // When you want to reset the origin:
  sceneGroup.position.copy(desiredOrigin).multiplyScalar(-1);
}

2. Use the WebXRManager's Reference Space

You can use the WebXRManager to modify the reference space:

JAVASCRIPTCopied
function setCustomOrigin(renderer) {
  const xr = renderer.xr;
  
  // Wait for the XR session to be active
  if (xr.isPresenting) {
    const referenceSpace = xr.getReferenceSpace();
    
    // Get current viewer pose
    const pose = xr.getFrame().getViewerPose(referenceSpace);
    if (pose) {
      // Create a transform from the current position
      const transform = new XRRigidTransform(
        {x: -pose.transform.position.x, y: -pose.transform.position.y, z: -pose.transform.position.z},
        {x: 0, y: 0, z: 0, w: 1}
      );
      
      // Create a new reference space with the offset
      const newReferenceSpace = referenceSpace.getOffsetReferenceSpace(transform);
      
      // Set the new reference space
      xr.setReferenceSpace(newReferenceSpace);
    }
  }
}

3. Use ArcballControls for Better Manipulation

While not directly solving the origin issue, ArcballControls can help you better navigate and manipulate your AR scene:

JAVASCRIPTCopied
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js';

// Create controls
const controls = new ArcballControls(camera, renderer.domElement, scene);
controls.enableZoom = true;
controls.enablePan = true;
controls.enableRotate = true;

// You can use the focus functionality to center on specific points
controls.setFocus(yourDesiredOriginPoint);

Note that for WebXR applications, you'll need to carefully integrate controls with the XR session, as the headset itself provides some camera control.

Remember to include the necessary Three.js files in your HTML:

HTMLCopied
<script src="path/to/three.js"></script>
<script src="path/to/examples/js/controls/ArcballControls.js"></script>
<script src="path/to/examples/js/webxr/VRButton.js"></script>

These approaches should help you better control the origin point in your AR application. The most reliable method is typically the second one, which directly works with the WebXR reference space.