我无所适从地用三根纤维做这件事。我想为相机创建一个装备(在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')
);
答案 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";