CODEWITHSUNDEEP
typescriptthree.jsorthographicreact-three-fiber
Davide
Davide

Reputation: 508

Moving the orthographic camera around in react three fiber

I am having an issue when trying to modify the orthographic camera in react-three-fiber.

Basically, I am setting up the camera in the canvas like this:

<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

Now, zoomStuff should move & update the camera information when something is performed (basically it should update the frustums and positions around)

  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();
  }

I am aware that this is not the best way of doing so, but I'm trying everything because I have a very stupid problem:

right now it correctly updates the camera position, and camera frustum BUT if I happen to scroll the page (not the canvas itself, but just the page) a re-render is triggered for reasons completely unknown to me.

The final result is that the final position is kept, but the frustum is reset to the beginning one.

What am I doing wrong? Is there anyway I can stop this rerendering from happening?

Upvotes: 3

Views: 5361

Answers (1)

Davide
Davide

Reputation: 508

Found it out..

Since I do not scrolling in any way, just putting 

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

does the trick.

Reason for that can be found here: https://github.com/react-spring/react-three-fiber/issues/251

Upvotes: 2

Related Questions