aframewebvrreact-360

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


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 has.

editor view in a-frame


Solution

  • 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;