Перемещение orthographi c камеры в реагировать три волокна - PullRequest
Новая
       9

Перемещение orthographi c камеры в реагировать три волокна

0 голосов
/ 13 января 2020

У меня возникла проблема при попытке изменить камеру orthographi c в реагирующем трехволоконном кабеле.

По сути, я настраиваю камеру на холсте следующим образом: 

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

Я знаю, что это не лучший способ сделать так, но я пытаюсь все, потому что у меня есть очень глупая проблема:

прямо сейчас он корректно обновляет положение камеры, и frustum камеры НО , если мне случится прокрутить страницу (не сам холст, но только страница) повторный рендеринг запускается по совершенно неизвестным мне причинам.

Окончательный результат заключается в том, что конечная позиция сохраняется, но усеченная часть сбрасывается на начальную.

Что я делаю не так? Могу ли я как-нибудь остановить этот повторный рендеринг?

1 Ответ

0 голосов
/ 14 января 2020

Обнаружил ..

Так как я не прокручиваю никаким образом, просто поставив 

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

, добьемся цели.

Причину можно найти здесь: https://github.com/react-spring/react-three-fiber/issues/251

...