设置相机角度react-三纤

Question

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

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

Answer 1

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

在画布元素的相机上设置旋转属性似乎没有执行任何操作，因此它可能会被我的测试场景中的其他内容重置。

请记住，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 />;
};