Как изменить камеру на 3-е лицо в React VR?

Составление сцены в React VR несколько громоздко, потому что вы всегда застреваете в виде от 1-го лица, что затрудняет оценку глубины, на которой расположены объекты.

По умолчанию камера размещена в координатах [0, 0, 0], я хотел бы знать, есть ли способ это контролировать. Ничего не нашел в документах, но знаю, что они неполные. Если это возможно, это могло бы проложить путь к специальному редактору, такому как

aframe react-360 webvr
person Valentin    schedule 21.07.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Добавление к ответам здесь.

  1. Вы можете почувствовать себя редактором, используя Nuclide и Atom, ссылки можно найти в документах React VR здесь

  2. Чтобы изменить положение камеры, вы можете использовать пользовательскую камеру ThreeJS и добавить ее в свою сцену, таким образом, вы можете оставить свои элементы виртуальной реальности нетронутыми.

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

Ваша пользовательская камера может быть похожа на

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;
person semuzaboi    schedule 10.11.2017
comment
Спасибо @luciferous, мне нравится этот подход, так как он не требует внесения изменений в вашу сцену, на самом деле это отдельная камера, которую я искал. - person Valentin; 10.11.2017

arrow_upward
1
arrow_downward

Для справочной информации в A-Frame вы можете выбрать любую камеру или переместить активную камеру куда угодно:

<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>
person ngokevin    schedule 21.07.2017

arrow_upward
1
arrow_downward

Вы можете использовать преобразование, чтобы изменить положение камеры, это должно дать вам такой же эффект, как на вашем экране:

 <View style={{
    transform: [
      {translate: [-20, -10, -20]},
    ],
  }}>
person Alan Wołejko    schedule 30.09.2017