在React Three Fiber中移动正交相机

Question

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

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

当前它正确更新了相机位置和相机视锥体，但是如果我滚动页面（而不是画布本身），会出现完全未知原因触发重新渲染。

最终结果是保持了最终位置，但视锥体被重置为起始状态。

我做错了什么？有没有办法阻止这种重新渲染发生？

- Davide

Answer 1

发现了这个问题...

由于我没有进行任何滚动操作，只是简单地输入：

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

这个技巧很实用。

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

- Davide