设置相机角度反应三光纤

Question

如何在使用react-three-fiber的场景中将相机指向某个方向?canvas元素有一个camera prop，但是它不提供设置角度的方法。

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

Answer 1

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

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

请记住，R3F是对three.js的一个非常薄的包装。所有适用于three.js的文档也适用于R3F。

对特定的Threejs版本没有硬依赖，它有不要包装或复制单个Threejs类。它只是表达JSX中的三个ejs:<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 />;
};

Answer 2

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

Answer 3

我不知道这是否是最好的答案，但对我来说，为相机添加rotation={[0,0,0]}会有所帮助(你必须找到最适合你改变数字的角度)。