设置相机角度 react-three-fiber

Question

我该如何在我的场景中使用react-three-fiber将相机指向特定方向？虽然画布元素具有相机属性，但它没有提供设置角度的方法。

    <Canvas camera={{ fov: 75, position: [-10, 45, 20]}}>

- Amol Borkar

---

不，这并没有回答我的问题。我正在询问如何使用名为“react-three-fiber”的包来完成此操作，该包没有相关文档。我不是在谈论底层库“three.js”中如何完成此操作。你们能不能更快地关闭问题呢？ - Amol Borkar

Answer 1

你可以通过useThree钩子来访问底层的three.js相机对象。

在canvas元素的相机上设置旋转属性似乎没有任何效果，所以可能会被我的测试场景中的其他因素重置。

请记住，R3F只是一个非常薄的three.js封装器。所有适用于three.js的文档同样适用于R3F。

它并不依赖于特定的Threejs版本，也不包装或复制任何单个的Threejs类。它仅仅是用JSX表达了Threejs：<mesh />变成了新的THREE.Mesh()，而且这是动态发生的。

import { Canvas, useThree } from "@react-three/fiber";
import * as THREE from 'three';

const Scene = () => {
  useThree(({ camera }) => {
    camera.rotation.set(THREE.MathUtils.degToRad(30), 0, 0);
  });
  
  return <Canvas />;
};

- zero298

---

你不能在画布外使用钩子。 https://discourse.threejs.org/t/accessing-the-camera-in-react-three-fiber-out-of-the-canvas/39137 - undefined

Answer 2

不需要使用useThree钩子。 只需添加rotation={[30,0,0]}或任何其他值，就像您在位置上所做的那样。 react-three/fiber可能非常棘手，因此可能需要重置应用程序才能查看结果。

- mohamad kasiri

Answer 3

我不确定这是否是最佳答案，但对我来说，将rotation={[0,0,0]}添加到相机中有所帮助（您必须找到最适合您的角度并更改数字）。

- Ricardo Javier