如何在 React VR 中将相机更改为第三人称?
How to change camera to 3rd person in React VR?
在 React VR 中构建场景有些麻烦,因为您总是停留在第一人称视角,这使得很难判断物体放置的深度。
默认情况下,相机位于 [0, 0, 0]
坐标,我想知道是否有办法控制它。在 docs but I know they're incomplete. If it's possible it could pave the way towards a dedicated editor like aframe 中找不到任何内容。
关于背景信息,在 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>
您可以使用变换来更改相机位置,这应该会给您带来与屏幕上类似的效果:
<View style={{
transform: [
{translate: [-20, -10, -20]},
],
}}>
在此处添加答案。
- 您可以使用 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;
在 React VR 中构建场景有些麻烦,因为您总是停留在第一人称视角,这使得很难判断物体放置的深度。
默认情况下,相机位于 [0, 0, 0]
坐标,我想知道是否有办法控制它。在 docs but I know they're incomplete. If it's possible it could pave the way towards a dedicated editor like aframe 中找不到任何内容。
关于背景信息,在 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>
您可以使用变换来更改相机位置,这应该会给您带来与屏幕上类似的效果:
<View style={{
transform: [
{translate: [-20, -10, -20]},
],
}}>
在此处添加答案。
- 您可以使用 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;