How to change camera to 3rd person in React VR?

Question

Composing a scene in React VR is somewhat cumbersome because you're always stuck in 1st person view which makes it hard to judge the depth at which objects are placed.

By default the camera is placed at [0, 0, 0] coords, I'd like to know if there's a way to control that. Couldn't find anything in the docs but I know they're incomplete. If it's possible it could pave the way towards a dedicated editor like aframe has.

Answer 1

Adding to the answers here.

1. You can get an 'editor'y feel using Nuclide and Atom , the links are found in the React VR docs here

2. In order to move the position of the camera, you can use a custom ThreeJS camera and add it to your scene, this way you can leave your VR elements untouched

   const vr = new VRInstance(bundle,"ReactVR",parent, { camera:customCamera,/*your custom threeJS camera*/ ...options, });

Your custom camera could be like

import { PerspectiveCamera } from "three";

const VIEW_ANGLE = 60;
const ASPECT = document.body.clientWidth / document.body.clientHeight;
const NEAR = 0.1;
const FAR = 10000;


const camera = new PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);

camera.name = "Custom3JSCamera";

camera.position.set(0,0,5);
export default camera;

Answer 2

For background information, in A-Frame, you can change to any camera you want or move the active camera wherever:

<a-scene>
  <a-entity position="0 0 -5"><a-entity id="camera1" camera="active: true"></a-entity>
  <a-entity position="5 0 5"><a-entity id="camera2" camera="active: false"></a-entity>
</a-scene>

<script>
  document.querySelector('#camera2').setAttribute('camera', 'active', true);
</script>

Answer 3

You can use transform to change camera place, this should give you a similar effect as on your screen:

 <View style={{
    transform: [
      {translate: [-20, -10, -20]},
    ],
  }}>