在反应三纤维中移动正交相机

Posted 2023-02-27

【中文标题】在反应三纤维中移动正交相机

【英文标题】：Moving the orthographic camera around in react three fiber

【发布时间】：2020-04-30 09:40:06

【问题描述】：

我在尝试修改 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();
  

我知道这不是最好的方法，但我正在尝试一切，因为我有一个非常愚蠢的问题：

现在它会正确更新相机位置，如果我碰巧滚动页面（不是画布本身，而只是页面），则相机视锥体 BUT 会因完全原因触发重新渲染我不知道。

最终的结果是保留了最后的位置，但是截头锥被重置到了开始的位置。

我做错了什么？无论如何我可以阻止这种重新渲染的发生吗？

【参考方案1】：

发现了..

由于我不以任何方式滚动，所以只是放

<Canvas resize=scroll: false
...
</Canvas>

成功了。

原因可以在这里找到： https://github.com/react-spring/react-three-fiber/issues/251