如何在 React VR 中将相机更改为第三人称？答案

【问题标题】：How to change camera to 3rd person in React VR?如何在 React VR 中将相机更改为第三人称？
【发布时间】：2017-07-21 21:33:44
【问题描述】：

在 React VR 中构建场景有点麻烦，因为您总是停留在第一人称视图中，这使得很难判断物体放置的深度。

默认情况下，相机放置在[0, 0, 0] 坐标处，我想知道是否有办法控制它。在docs 中找不到任何内容，但我知道它们不完整。如果可能的话，它可以为像aframe 这样的专用编辑器铺平道路。

【问题讨论】：

标签： aframe aframe webvr react-360

【解决方案1】：

在此处添加答案。

您可以使用 Nuclide 和 Atom 获得“编辑”的感觉，链接位于 React VR 文档here
为了移动相机的位置，您可以使用自定义 ThreeJS 相机并将其添加到您的场景中，这样您就可以保持 VR 元素不变

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;

【讨论】：

感谢@luciferous，我喜欢这种方法，因为它不需要对您的场景进行更改，它实际上是一个单独的相机，正是我想要的。

【解决方案2】：

有关背景信息，在 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>

【讨论】：

【解决方案3】：

您可以使用变换来更改相机位置，这应该会给您带来与屏幕上类似的效果：

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

【讨论】：