reactjs - Potree/Three.js - 我在哪里可以找到实时摄像头(活动摄像头)位置坐标?
问题描述
我正在使用 React 开发一个应用程序,它使用 Potree 查看器 ( https://github.com/potre/potre ) 来显示大型点云文件;在查看器中,我试图向用户显示实时相机坐标(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>
);
}
解决方案
经过几个小时的调查和尝试,我想出了一个解决方案。它背后的原理与数字时钟相同。
这是代码:
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 >
);
}
推荐阅读
- php - 用 Python 语法编写这个 PHP 代码的最简单方法是什么?
- azure - 在不知情的情况下通过 ARM 向 Vault 添加秘密
- cassandra - 使用 ccm start 时 Inet 地址 127.0.0.1:9042 不可用
- vue.js - 使用过滤数组时的转换组意外行为
- python - 如何使用 TensorFlow 的渴望执行检查我的张量的内容?
- deep-learning - 我可以分配我的训练数据并训练每个部分,而不是一次输入我的全部数据吗?
- swift - 如何从套接字获取数据并制作 protobuf 文件?
- xml - odoo 表单视图中的 XML 整数格式
- android - 资源样式项目名称“android:blablabla”红色突出显示,不工作,没有错误
- fuzzy-search - 在云上的 db2(以前的 dashdb)上使用“db2 文本搜索”