如何将相机嵌套在一组中以反应三根光纤

时间:2020-09-24 05:05:23

标签: reactjs three.js react-three-fiber

我无所适从地用三根纤维做这件事。我想为相机创建一个装备(在three.js中很简单)。我把相机放在一组里面。如果要绕Y轴旋转摄像机,请更改父组的旋转。如果要绕X轴旋转,请旋转相机本身。这样,我不会处理万向架问题(例如,如果y旋转180度,那么x旋转将反转)。

在three.js中,我会这样做:

const cameraRig = new THREE.Group();
cameraRig.add(camera);
scene.add(cameraRig);

cameraRig.rotation.y = Math.PI;
camera.rotation.x = Math.PI/8;

但是我不知道用三纤维反应。

我有一个来自useThree的相机

const {camera} = useThree();

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <group rotation={[0,Math.PI,0]}>
      <camera rotation={[Math.PI/8,0,0]}/>
    </group>
  </Canvas>,
  document.getElementById('root')
);

2 个答案:

答案 0 :(得分:1)

react-three-fiber-fiber带有自己的摄像头,这是默认设置,您将无法在其中嵌套孩子。您当然可以使用自己的摄像机,状态模型为此具有“ setDefaultCamera”功能,以便指针事件和其他所有事情都可以使用您的新摄像机。不幸的是,摄像头一分为三,因此仍然存在一些混乱,因为您需要在调整大小时对其进行更新,需要计算长宽比等。所有这些都已在此处提取:https://github.com/pmndrs/drei#perspectivecamera-

<PerspectiveCamera makeDefault>
  <mesh />
</PerspectiveCamera>

可以解决所有问题。现在,相机是系统默认设置,它会带孩子。

答案 1 :(得分:0)

通常,在游戏中,要使摄像机像FPS摄像机那样移动而不会失去向上运动的“向上”,您可以将摄像机放置在另一个3D对象的内部,并在外部对象中绕Y轴旋转,在X轴上绕X轴旋转。相机对象,以防止万向架怪异。这样做会反应三根光纤,导致怪异的虫子冻结了相机。要解决此问题,您可以更改代表相机旋转的欧拉旋转ORDER,而不是构建装备。为此,只需执行以下操作:

const { scene, gl, size, camera } = useThree();
camera.rotation.order = "YXZ";