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

Question

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

但在反应三纤维我不知道。

我有一台正在使用的相机Three

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三根光纤自带摄像头，这是默认的，你不能在里面嵌套孩子。当然，你可以使用自己的相机，州模型有一个"；setDefaultCamera"；函数，这样指针事件和其他一切都可以使用您的新相机。不幸的是，相机并不是直接分成三个，所以仍然会有一些变动，因为你需要在调整大小时更新它，你需要计算纵横比等。所有这些都在这里抽象出来：https://github.com/pmndrs/drei#perspectivecamera-

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

它可以处理所有的事情。现在，相机是系统默认设置，它会拍摄孩子。

Answer 2

经典的游戏，让相机像FPS相机一样移动而不丢失"向上"；在上面，你可以把一个相机放在另一个3D对象内部，并围绕外部对象的Y轴和相机对象的X轴旋转，以防止万向节怪异。在react三光纤中执行此操作会导致一个奇怪的错误，导致相机冻结。若要解决此问题，可以更改表示摄影机旋转的Euler的旋转顺序，而不是构建装备。要做到这一点，只需这样做：

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