Potree/Three.js - 我在哪里可以找到实时摄像头（活动摄像头）位置坐标？答案

【问题标题】：Potree/Three.js - Where can I find the real time camera (active camera) position coordinates?Potree/Three.js - 我在哪里可以找到实时摄像头（活动摄像头）位置坐标？
【发布时间】：2023-03-24 22:50:01
【问题描述】：

我正在使用 React 开发一个应用程序，它使用 Potree 查看器 (https://github.com/potree/potree) 来显示大型点云文件；在查看器中，我尝试向用户显示实时相机坐标（X、Y、Z），并将使用它们来优化云渲染。

通过获取活动相机 (viewer.scene.getActiveCamera()) 并在 viewer.scene.cameraP.position.x/y/z 中查找坐标，我已经能够获取坐标所在的位置。虽然这些值看起来是静态的，但我之所以这么说是因为我尝试使用 useEffect() 挂钩来更新我的 React 组件，基于任何坐标的变化，但这是行不通的。

有没有人之前遇到过同样的问题并且可以帮助我查找/采购相机坐标实时值，或者帮助我实际使用我已经找到的值并让它们在 React 中实时更新？

function Coordinates({ viewer, drawerOpen }) {
  const myActiveCamera = viewer.scene.getActiveCamera();
  const [cameraCoords, setCameraCoords] = useState(null);

  useEffect(() => {
    console.log("hello");
    if (viewer !== null && viewer.scene !== null) {

      setCameraCoords(myActiveCamera.position);
    }
  }, [myActiveCamera.position.x, myActiveCamera.position.y, myActiveCamera.position.z]);

  console.log(viewer);
  console.log(myActiveCamera);
  console.log(cameraCoords);

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

        <Divider orientation="vertical" flexItem />

        {viewer ? (
          <Typography variant="p">
            X: {cameraCoords.x.toFixed(8)}
          </Typography>
        ) : (
          <Typography variant="p">X: 0.0</Typography>
        )}

        <Divider orientation="vertical" flexItem />

        {viewer ? (
          <Typography variant="p">
            Y: {cameraCoords.y.toFixed(8)}
          </Typography>
        ) : (
          <Typography variant="p">Y: 0.0</Typography>
        )}

        <Divider orientation="vertical" flexItem />

        {viewer ? (
          <Typography variant="p">
            Z: {cameraCoords.z.toFixed(8)}
          </Typography>
        ) : (
          <Typography variant="p">Z: 0.0</Typography>
        )}
      </Contents>
    </Container>
  );
}

【问题讨论】：

标签： reactjs three.js point-clouds

【解决方案1】：

经过几个小时的调查和尝试，我想出了一个解决方案。其原理与数字时钟相同。

代码如下：

function Coordinates({ viewer, drawerOpen }) {

  //Declaring the state for the cameraposition coordinates and setting their default to 0
  const [activeCameraCoordinates, setActiveCameraCoordinates] = useState({ x: 0, y: 0, z: 0 });

  //The useEffect and the timer, work together to achieve a real time value update displayed to the user
  useEffect(() => {
    setInterval(() => {
      if (viewer !== 'undefined' && viewer !== undefined && viewer !== null) {
        let cameraPosition = viewer.scene.getActiveCamera().position;
        setActiveCameraCoordinates(cameraPosition);
      }
    }, 100)
  })

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

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

【讨论】：