Potree/Three.js结合React开发时如何获取激活相机实时位置坐标

你当前的实现没有生效，核心原因是Potree内部对相机位置的更新是在其独立的渲染循环中完成的，属于React组件外的原生对象属性变更，React的useEffect依赖检测无法感知这类外部对象的属性变化，所以不会触发回调执行。

方案1：使用requestAnimationFrame轮询更新（兼容性最强） #

通过浏览器自带的requestAnimationFrame API，在每帧渲染前读取最新的相机坐标并更新React状态，实现实时同步：

function Coordinates({ viewer, drawerOpen }) {
  const [cameraCoords, setCameraCoords] = useState({x: 0, y: 0, z: 0});

  useEffect(() => {
    if (!viewer || !viewer.scene) return;

    let animationFrameId = null;
    const updateCameraCoords = () => {
      const activeCamera = viewer.scene.getActiveCamera();
      // 必须传入新对象，不可直接传position引用，否则React不会触发重渲染
      setCameraCoords({
        x: activeCamera.position.x,
        y: activeCamera.position.y,
        z: activeCamera.position.z
      });
      animationFrameId = requestAnimationFrame(updateCameraCoords);
    };

    updateCameraCoords();

    // 组件卸载时清除动画帧，避免内存泄漏
    return () => {
      if (animationFrameId) cancelAnimationFrame(animationFrameId);
    };
  }, [viewer]);

  return (
    <Container maxWidth={false} style={{ marginLeft: drawerOpen ? '210px' : 0 }}>
      <Contents container alignItems="center">
        <CameraAlt /> {/*Camera Icon*/}

        <Divider orientation="vertical" flexItem />
        <Typography variant="p">X: {cameraCoords.x.toFixed(8)}</Typography>
        
        <Divider orientation="vertical" flexItem />
        <Typography variant="p">Y: {cameraCoords.y.toFixed(8)}</Typography>
        
        <Divider orientation="vertical" flexItem />
        <Typography variant="p">Z: {cameraCoords.z.toFixed(8)}</Typography>
      </Contents>
    </Container>
  );
}

方案2：绑定Potree渲染事件（性能更高） #

如果不需要帧率拉满的实时更新，可以绑定Potree自带的渲染事件，仅当Potree主动渲染场景时才同步坐标，降低性能消耗，仅需要替换useEffect内的逻辑即可：

useEffect(() => {
  if (!viewer || !viewer.scene) return;

  const updateCameraCoords = () => {
    const activeCamera = viewer.scene.getActiveCamera();
    setCameraCoords({
      x: activeCamera.position.x,
      y: activeCamera.position.y,
      z: activeCamera.position.z
    });
  };

  // 绑定Potree渲染事件
  viewer.addEventListener('render', updateCameraCoords);

  // 组件卸载时移除事件监听
  return () => {
    viewer.removeEventListener('render', updateCameraCoords);
  };
}, [viewer]);

• 不要直接将activeCamera.position引用传入setState，React对引用类型的状态只会对比内存地址，属性变更不会触发重渲染，必须构造新的普通对象传入。
• 不要将相机的x/y/z属性放入useEffect依赖数组，React无法感知外部原生对象的属性变更，添加后也不会触发回调执行。
• 必须在useEffect的清理函数中释放动画帧、移除事件监听，避免组件卸载后出现内存泄漏。

内容的提问来源于stack exchange，提问作者Alex