typescript - 在反应三纤维中移动正交相机
问题描述
我在尝试修改 react-three-fiber 中的正交相机时遇到问题。
基本上,我在画布中设置相机是这样的:
<Canvas
invalidateFrameloop
orthographic
camera={{
position: this.state.position,
left: this.state.frustum[0],
right: this.state.frustum[1],
bottom: this.state.frustum[2],
top: this.state.frustum[3]
}} >
<TreemapContainer ... zoomStuff={this.zoomStuff} />
</ Canvas
现在,zoomStuff 应该在执行某些操作时移动和更新相机信息(基本上它应该更新平截头体和周围的位置)
private zoomStuff = (camera: OrthographicCamera, position: number[], frustum: number[]) => {
this.setState(prevState => { return { ...prevState, position, frustum } })
camera.position.set(position[0], position[1], position[2]);
camera.left = frustum[0]
camera.right = frustum[1]
camera.bottom = frustum[2]
camera.top = frustum[3]
camera.updateProjectionMatrix();
}
我知道这不是最好的方法,但我正在尝试一切,因为我有一个非常愚蠢的问题:
现在它正确地更新了相机位置和相机平截头体但是如果我碰巧滚动页面(不是画布本身,而只是页面),由于我完全不知道的原因触发了重新渲染。
最终结果是保留了最终位置,但截头锥体重置为开始位置。
我究竟做错了什么?无论如何我可以阻止这种重新渲染的发生吗?
解决方案
发现了。。
因为我不以任何方式滚动,只是把
<Canvas resize={{scroll: false}}
...
</Canvas>
成功了。
原因可以在这里找到: https ://github.com/react-spring/react-three-fiber/issues/251
推荐阅读
- c# - 通过 Selenium 查找元素时如何在 CssSelector 中使用通配符?
- javascript - Vue js 和 W3C HTML 验证器
- javascript - 当我输入文本输入时,我的 vue.js 应用程序会重置主题颜色。如何让主题色保持不变?
- nginx - 使用 Nginx 蜜罐并使用黑名单、防火墙阻止 ip 或 fail2ban
- javascript - 将 blob 转换为 .doc、.docx、.xls 或 .txt 以在浏览器中查看而无需使用 Javascript 下载
- python - 如何使用 RE 在字符串中查找多个平衡大小的匹配项?
- blazor - 从 Javascript 更新 Blazor EditForm 的 InputNumber 字段
- vue.js - 是否有任何与 vue cli 等效的 npx create react app?
- powershell - 获取所有具有数字 SamAccountName 的 ADuser
- django - 对各种模型实例进行批量操作