React Three Fiber: 스크롤 이벤트가 지연되는 이유는 무엇입니까?

Question

React Three Fiber에는 카메라 확대/축소 전반에 걸쳐 유지하려는 스프라이트를 생성하는 React 구성 요소가 있습니다. 알고리즘은 작동하는 것 같지만(시간이 지나도 크기가 변하지 않는 것 같습니다) 확대 및 축소할 때 크기가 조정되는 것을 눈으로 볼 수 있습니다.

다른 곳에서도 비슷한 작업이 스프라이트에 수행되는 것을 본 적이 있는데 문제가 발생하지 않고 잘 작동하는 것 같습니다. 뭔가 렉이 있는 것 같은데, 어디에 있는지, 어떻게 해결해야 할지 모르겠습니다.

문제에 대한 동영상도 첨부했습니다: https://drive.google.com/file/d/121XPY1pB5bNJr5EYNESnyPfLDdtEeIhn/view?usp=sharing

React 컴포넌트에 대한 코드를 첨부했습니다. 일반 React Three Fiber 코드와 마찬가지로 이는 캔버스 구성 요소에 입력됩니다.

으아악

모든 프레임을 업데이트하므로 문제가 무엇인지 잘 모르겠습니다. 그렇게 느리거나 결함이 있는 것처럼 보이지 않기를 바랍니다.

제가 찾고 있는 것은 다음과 같습니다: https://drive.google.com/file/d/1KtEcrikFJFYboC6LX0mFVttx2eSTia0c/view?usp=sharing 눈에 띄는 지연이 없습니다. 이 지연 없는 버전을 생성하는 코드는 순수 JavaScript Three.js입니다.

으아악

일반 Three.js와 React Three Fiber의 로직은 같은 느낌이지만 결과는 전혀 다릅니다.

Answer 1

React를 사용하고 계십니다.

따라서 "window.document.addEventListener" 사용 시 주의하시기 바랍니다. 구성 요소가 다시 렌더링될 때마다 새 이벤트 리스너가 생성되어 페이지에 많은 이벤트 리스너가 생성됩니다.

대신 후크 사용을 고려해 보세요. React-Three-drei에서 많은 후크를 찾을 수 있습니다. 나는 React-two-drei를 사용하는 것을 적극 권장합니다.

으아악

귀하의 경우에는 useFrame에서 이벤트 리스너를 사용하고 있습니다. 그런 다음 useFrame은 초당 60번 실행됩니다. 초당 60개의 이벤트 리스너를 생성합니다.