如何将相机指向三根光纤

Question

我试图将相机指向Three Fiber中场景原点以外的位置，但我很挣扎。我已经使用JS几十年了，但React对我来说是新的，Three Fiber更是如此！

我在网上找到了这个，它很有效：

const PointCam = () => {
useFrame((state) => {
state.camera?.lookAt(new THREE.Vector3(70, 900, -30))
state.camera.up = new THREE.Vector3(0, 1, 0);
state.camera.updateProjectionMatrix()
});
return null
}

<Canvas camera={{ aspect: 300 / 500, near: 2, far: 50000, fov: 35, position: [-350, 1600, 3150] }} >
<PointCam />
</Canvas>

但我刚刚发现useFrame在每次渲染场景时都会执行。

我怎么能只执行一次呢？

Answer 1

我不知道这是否会对你有所帮助，但我也遇到了类似的问题。在我看来，相机上的目标属性不起作用。然而，当我将目标转移到轨道控制时，它完美地工作了。

<OrbitControls target={[.6, .4, 0]}/>

Answer 2

从文档https://docs.pmnd.rs/react-three-fiber/api/hooks

想要参与renderloop的组件可以使用useFrame，需要了解三个.js细节的组件可以用useThree

所以你可以用useThree代替useFrame

useThree((state) => {
state.camera?.lookAt(new THREE.Vector3(70, 900, -30))
state.camera.up = new THREE.Vector3(0, 1, 0);
state.camera.updateProjectionMatrix()
});