Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 如何将相机嵌套在三根光纤中的一组中_Reactjs_Three.js_React Three Fiber - Fatal编程技术网

Reactjs 如何将相机嵌套在三根光纤中的一组中

Reactjs 如何将相机嵌套在三根光纤中的一组中,reactjs,three.js,react-three-fiber,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.ro

我不知道怎么用三根纤维做这个。我想为相机创建一个装备(这在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;
但在三种纤维中我不知道

我有一个相机,我用的是USE3

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')
);
const{camera}=usetree();
ReactDOM.render(
,
document.getElementById('root'))
);

react three fiber自带摄像头,这是默认设置,您将无法在其中安顿孩子。当然,状态模型有一个“setDefaultCamera”函数,因此指针事件和其他一切都可以使用新的相机。不幸的是,相机不是三个一组的,所以仍然有一些搅动,因为您需要在调整大小时更新它,您需要计算纵横比等。所有这些都已在此处抽象:



那会照顾好一切。现在,相机是系统默认设置,它需要孩子。

在游戏中,为了让相机像FPS相机一样移动,并且不会失去“向上”的感觉,您可以将相机放在另一个3D对象的内部,并围绕外部对象的Y轴和相机对象的X轴旋转,以防止框架怪异。在三根光纤中执行此操作会导致一个奇怪的错误,使相机冻结。要解决此问题,可以更改表示摄影机旋转的Euler的旋转顺序,而不是构建装备。为此,只需执行以下操作:

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

我将尝试实施这一建议,并向您汇报。这是一个很好的建议,但最终没有奏效。我试图实现我自己的触摸拖动相机(有点像反向的轨道相机),每次触摸或点击发生时,相机都会在每次鼠标事件发生时停止响应。
const { scene, gl, size, camera } = useThree();
camera.rotation.order = "YXZ";