CODEWITHSUNDEEP
aframewebvrreact-360
Valentin
Valentin

Reputation: 2858

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

Upvotes: 2

Views: 874

Answers (3)

semuzaboi
semuzaboi

Reputation: 5172

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;

Upvotes: 2

Alan Wołejko
Alan Wołejko

Reputation: 452

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]},
    ],
  }}>

Upvotes: 1

ngokevin
ngokevin

Reputation: 13233

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>

Upvotes: 1

Related Questions