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?

ka_sc · May 29, 2022, 10:13am

Anyone has come up with a solution yet?

godber · May 29, 2022, 3:19pm

I still haven’t come back to this project. I was hoping someone more knowledgable would chime in.

forerunrun · May 30, 2022, 12:58pm

Yeah use another camera until entering VR, or a potential sudo idea would be to have a ghost secondary camera with orbit controls on it and apply this ghost camera matrix to the parent group containing your primary camera (maybe?)

philswan · September 30, 2022, 4:44am

I think that you should not try to use “OrbitControls” when entering VR, and instead implement an alternate method of manipulating the scene that makes use of the VR controllers. GoogleEarth VR provides a good example of how a scene can be navigated with your controllers.

seanwasere · September 30, 2022, 8:03am

I implemented a custom solution in this project.
Game : Ball-VR
Source : Sean-Bradley/Ball-VR: A ball rolling experiment in VR (github.com)
You use the controllers to rotate around the ball, roll forward/backward and change direction.
Only tested on Quest (and dekstop).

Ball-VR Demo