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

Question

我正在使用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>
);
}

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