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 が 1 秒あたり 60 回実行されます。 1 秒あたり 60 個のイベント リスナーを作成します。