Search code examples
aframe

enable orbit controls in VR


I'm using the orbit-controls that are part of Kevin Ngo's k-frame package: https://github.com/ngokevin/kframe/tree/master/components/orbit-controls/

the controls allow you to rotate your camera around the scene, creating the impression of rotating the scene around your view point. unfortunately, the component automatically switches to first person look controls in the center of the scene when entering VR mode.

for my project, I want to keep the orbit perspective and orbit controls, even in VR. I thought, this simply could be achieved by disabling the part of the code after the check if VR is entered.

    el.sceneEl.addEventListener('enter-vr', () => {
  if (!AFRAME.utils.device.checkHeadsetConnected() &&
      !AFRAME.utils.device.isMobile()) { return; }
  this.controls.enabled = false;
  if (el.hasAttribute('look-controls')) {
    el.setAttribute('look-controls', 'enabled', true);
    oldPosition.copy(el.getObject3D('camera').position);
    el.getObject3D('camera').position.set(0, 0, 0);
  }
});

the orbit-controls component operates directly on the three.js camera instead of on the aframe level - however, the vr camera is managed is managed by aframe. so far everything that I tried ended up with the vr camera in the center of the scene..

I managed to see the camera moving around the scene in VR mode - however, I'm stuck in my VR position


Solution

  • I recommend creating and rotating a parent a-entity of the model / scene instead. Moving the camera will collide with look-controls as you've seen, will be uncomfortable for the users and likely induce motion sickness.