Potree/Three.js -在哪里可以找到实时相机(活动摄像机)位置坐标？

Question

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

通过获取活动摄像机(viewer.scene.getActiveCamera())并在viewer.scene.cameraP.plaction.x/y/z中找到坐标，我已经能够找到坐标所在的位置。尽管这些值似乎是静态的，但我这么说是因为我试图使用useEffect()挂钩更新我的are组件，这是基于任何一个坐标的改变，而这是不可行的。

有没有人遇到过同样的问题，并能帮助我找到/采购相机坐标的实时值，或帮助我实际使用我已经找到的值，并使他们实时更新的反应？

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>
  );
}

Answer 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 >
  );
}