在反应三纤维中四处移动正交相机
Moving the orthographic camera around in react three fiber
我在尝试修改 react-three-fiber 中的正交相机时遇到问题。
基本上,我在 canvas 中设置相机是这样的:
<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 本身,而是页面)由于我完全不知道的原因触发了重新渲染。
最后的结果是保留了最后的位置,但是视锥体被重置为开始的位置。
我做错了什么?无论如何我可以阻止这种重新渲染的发生吗?
找到了..
因为我不以任何方式滚动,所以只放
<Canvas resize={{scroll: false}}
...
</Canvas>
成功了。
可以在此处找到这样做的原因:
https://github.com/react-spring/react-three-fiber/issues/251
我在尝试修改 react-three-fiber 中的正交相机时遇到问题。
基本上,我在 canvas 中设置相机是这样的:
<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 本身,而是页面)由于我完全不知道的原因触发了重新渲染。
最后的结果是保留了最后的位置,但是视锥体被重置为开始的位置。
我做错了什么?无论如何我可以阻止这种重新渲染的发生吗?
找到了..
因为我不以任何方式滚动,所以只放
<Canvas resize={{scroll: false}}
...
</Canvas>
成功了。
可以在此处找到这样做的原因: https://github.com/react-spring/react-three-fiber/issues/251