如何在反应三纤维中将相机嵌套在一个组中

Question

在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;

但是在react-three-fiber中我不知道。

我有一个相机，我正在使用 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')
);

Answer 1

react-three-fiber 自带摄像头，这是默认设置，您无法在其中嵌套 children。你当然可以使用你自己的相机，状态模型为此有一个“setDefaultCamera”函数，这样指针事件和其他一切都可以使用你的新相机。不幸的是，三个摄像头并不是直截了当的，所以仍然有一些变化，因为你需要在调整大小时更新它，你需要计算纵横比等。所有这些都在这里抽象出来：https://github.com/pmndrs/drei#perspectivecamera-

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

这会处理一切。现在那个相机是系统默认的，需要children。

Answer 2

传统上，在游戏中，要使相机像 FPS 相机一样移动而不丢失“向上”，您可以将相机放在另一个 3D 对象内部并围绕外部对象的 Y 轴和 X 轴旋转相机对象的轴，以防止万向节怪异。在反应三纤维中这样做会导致一个奇怪的错误，使相机冻结。要解决此问题，您可以更改表示相机旋转的 Euler 的旋转 ORDER，而不是构建装备。为此，只需执行以下操作：

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

如何在反应三纤维中将相机嵌套在一个组中

How to nest a camera in a group in react three fiber

three.js

reactjs

react-three-fiber