ホームページ  >  に質問  >  本文

useframe により three.webglrenderer: コンテキストが失われる

useFrame を使用して React 3 Fiber drei Box コンポーネントのサイズをアニメーション化しようとしています。 useFrame 関数を追加するまではジオメトリは正常に動作していましたが、この関数を追加するとブラウザが THREE.WebGLRenderr: Context Lost エラーをスローし、再レンダリングが妨げられました。

import React、「react」からの {useRef};
import { Box } から '@react-three/drei';
import { useFrame } から '@react-three/fiber';

デフォルト関数 BarGraph() をエクスポート {
  const purpleColor = "#5b21b6";
  const barRef1 = useRef();

  useFrame(
    (状態) => {
      barRef1.current.parameters. Depth = Math.sin(state. Clock.elapsedTime) 3;
    }
  )

  戻る (
    <メッシュ位置={[0,1,1]}スケール={0.5}>
      <ボックス引数={[1,1,3]} 位置={[1,3,2]} ref={barRef1}>
        <メッシュ標準マテリアルカラー={purpleColor}/>
      </ボックス>
    </メッシュ>
  )

useFrame の内容を barRef1.current.args = [1,1,Math.sin(state. Clock.elapsedTime) 3] に置き換えてみましたが、同じ結果が得られました。

ブラウザーのグラフィックス機能に過負荷をかけていることはわかっていますが、useFrame でそれを制限する理由と方法が正確にわかりません。

更新:

コンポーネントの scale プロパティにアクセスして変更し、期待どおりの結果を得ることができました。

useFrame(
    (状態) => {
      barRef1.current.scale.y = Math.sin(state. Clock.elapsedTime) 3;
    }
  )

P粉025632437P粉025632437236日前407

全員に返信(1)返信します

  • P粉841870942

    P粉8418709422024-03-20 10:52:48

    コンポーネントの scale プロパティにアクセスして変更し、期待どおりの結果を得ることができました。

    useFrame(
        (状態) => {
          barRef1.current.scale.y = Math.sin(state. Clock.elapsedTime) 3;
        }
      )

    返事
    0
  • キャンセル返事