如何修改CameraControls的初始视角？React组件中设置无效问题求助

嘿，我之前也碰到过类似的坑！你代码里修改mesh位置生效但CameraControls的setLookAt没反应，主要有两个常见原因，咱们一步步来解决：

1. CameraControls还没完成初始化 #

组件挂载时的空依赖useEffect执行时机太早，这时候CameraControls可能还没和相机完成绑定，内部状态还没准备好，直接调用setLookAt自然不会生效。

2. 调用setLookAt后未触发状态同步 #

即使Controls初始化好了，setLookAt只是设置了目标视角参数，默认不会自动同步到相机或者触发渲染更新，需要手动调用update方法来完成这个过程。

给你两种可行的修改方案：

方案一：利用CameraControls的onReady回调（推荐）

这个回调会在Controls完全初始化完成后触发，能确保调用setLookAt时所有状态都准备就绪：

const cameraControlsRef = useRef<CameraControls>(null!);
const ref = useRef<THREE.Mesh>(null!);

useEffect(() => {
  // 修改mesh位置的代码保留
  ref.current.position.y = 1;
}, []);

return (
  <>
    <PerspectiveCamera makeDefault fov={70} position={[5, 0, 0]} />
    <CameraControls 
      ref={cameraControlsRef}
      onReady={(controls) => {
        // 在ready回调里设置初始视角
        controls.setLookAt(2.68, 1.32, -1.9, 0, 0, 0);
        // 手动触发更新同步到相机
        controls.update(0);
      }}
    />

    <mesh ref={ref}>
      <boxGeometry args={[1,1,1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </>
);

方案二：在useEffect中等待渲染循环执行

用requestAnimationFrame确保代码在浏览器下一次渲染时执行，这时候Controls通常已经初始化完成：

const cameraControlsRef = useRef<CameraControls>(null!);
const ref = useRef<THREE.Mesh>(null!);

useEffect(() => {
  if (!cameraControlsRef.current) return;

  const handle = requestAnimationFrame(() => {
    cameraControlsRef.current!.setLookAt(2.68, 1.32, -1.9, 0, 0, 0);
    // 调用update同步状态
    cameraControlsRef.current!.update(0);
  });

  // 清理定时器避免内存泄漏
  return () => cancelAnimationFrame(handle);
}, []);

// 修改mesh位置的代码可以单独放在另一个useEffect或者当前useEffect里
useEffect(() => {
  ref.current.position.y = 1;
}, []);

return (
  <>
    <PerspectiveCamera makeDefault fov={70} position={[5, 0, 0]} />
    <CameraControls ref={cameraControlsRef} />

    <mesh ref={ref}>
      <boxGeometry args={[1,1,1]} />
      <meshStandardMaterial color="hotpink" />
    </mesh>
  </>
);

另外记得把你代码里注释掉的if (!cameraControlsRef.current) return;恢复，避免出现空指针报错哦！

备注：内容来源于stack exchange，提问作者Chaong