OrbitControls stop working when grouping camera for XR

godber · January 17, 2022, 8:22pm

I have just added my camera to a group so I can set its position in VR in the demo below:

https://xr.webvr.dev/ex/three.js/points2/ex8.html

VR works, which is great, but now OrbitControls doesn’t work.

godber/xr.webvr.dev/blob/ecc6670e994fb732c952a820c6dd2151088342e6/build/ex/three.js/points2/ex8.js#L72

    
      
            document.body.appendChild(VRButton.createButton(renderer));
          
          
  scene = new THREE.Scene();
            scene.background = new THREE.Color(guiSettings.background);
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 5000);
            cameraGroup.add(camera);
            cameraGroup.position.set(-200, 200, 450);
            scene.add(cameraGroup);
          
          
  // eslint-disable-next-line no-new
            new OrbitControls(camera, renderer.domElement);
            window.addEventListener('resize', onWindowResize);
          
          
  guiInit();
          
          
  // populate the tristogram
            tristogram = new ThreeTristogram(scene, guiSettings);
            oldImage = guiSettings.image;
            await tristogram.load(guiSettings.image);
          }

Here’s the previous version where it worked:

github.com

godber/xr.webvr.dev/blob/ecc6670e994fb732c952a820c6dd2151088342e6/build/ex/three.js/points2/ex7.js

/* TODO
 *  - LUT https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_colors_lookuptable.html
 *  - add an adjustable opacity scaling factor
 *  - add min/max thresholding on data and display values
 */

import * as THREE from './js/three.module.js';
import { VRButton } from './jsm/webxr/VRButton.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GUI } from './jsm/libs/lil-gui.module.min.js';
import { ThreeTristogram } from './js/lib-ex7.js';

let camera;
let scene;
let renderer;
let tristogram;
let oldImage;
const canvas = document.querySelector('canvas.webgl');
canvas.ondrop = dropHandler;
canvas.ondragover = dragOverHandler;

This file has been truncated. show original

Is it obvious to any of you why this stopped working? I assume it’s something I just don’t understand.

Thanks,
Austin

godber · January 17, 2022, 11:00pm

Oh, this is probably a clue (source)

object: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.

So by placing the camera into a Group, I probably break it. To me, this implies that OrbitControls and positioning the VR camera are mutually exclusive. Is there some workaround?

godber · January 27, 2022, 2:45pm

I haven’t come back to this project yet, but I’ve been thinking about solutions. Could I only put the camera in the group when entering VR mode? Or … could I have two cameras, one for 2D and one for 3D and switch between them?