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

【问题标题】：How to nest a camera in a group in react three fiber如何在反应三纤维中将相机嵌套在一个组中
【发布时间】：2021-01-10 08:34:59
【问题描述】：

我在 react-three-fiber 中不知所措。我想为相机创建一个装备（这在 three.js 中很简单）。我把相机放在一组里面。如果我想绕 Y 轴旋转相机，我改变父组的旋转。如果我想绕 X 轴旋转它，我会旋转相机本身。这样一来，我就不用处理万向节问题（比如如果 y 旋转为 180 度，那么 x 旋转就会反转）。

在三个.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')
);

【问题讨论】：

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

【解决方案1】：

react-three-fiber 自带摄像头，这个是默认的，你不能在里面嵌套孩子。您当然可以使用自己的相机，状态模型为此提供了“setDefaultCamera”功能，以便指针事件和其他一切都可以使用您的新相机。不幸的是，相机在三个中都不是直截了当的，所以仍然涉及一些流失，因为您需要在调整大小时对其进行更新，您需要计算纵横比等。所有这些都已在此处抽象出来：https://github.com/pmndrs/drei#perspectivecamera-

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

这会照顾一切。现在那个相机是系统默认的，它需要孩子。

【讨论】：

我将尝试实施并报告
这是一个不错的建议，但最终没有奏效。我试图实现自己的触摸拖动相机（有点像反向的轨道相机），每次发生触摸或点击时，每次发生鼠标事件时相机都会停止响应。

【解决方案2】：

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

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

【讨论】：