首頁  >  問答  >  主體

useframe導致three.webglrenderer: 上下文遺失

我正在嘗試使用 useFrame 對 React 3 Fiber drei Box 元件的大小進行動畫處理。幾何圖形工作正常,直到我添加 useFrame 函數,這會導致瀏覽器拋出 THREE.WebGLRenderr: Context Lost 錯誤並阻止任何重新渲染。

import React, {useRef} from 'react';
import { Box } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';

export default function BarGraph() {
  const purpleColor = "#5b21b6";
  const barRef1 = useRef();

  useFrame(
    (state) => {
      barRef1.current.parameters.depth = Math.sin(state.clock.elapsedTime) 3;
    }
  )

  return (
    <mesh position={[0,1,1]} scale={0.5}>
      <Box args={[1,1,3]} position={[1,3,2]} ref={barRef1}>
        <meshStandardMaterial color={purpleColor}/>
      </Box>
    </mesh>
  )

我還試著用 barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) 3] 取代 useFrame 的內容,但它產生了相同的結果。

我知道我正在超載瀏覽器的圖形功能,但我不知道到底為什麼或如何在 useFrame 中限制它。

更新:

我能夠存取和修改 scale 屬性的元件並達到預期的結果。

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

P粉025632437P粉025632437236 天前408

全部回覆(1)我來回復

  • P粉841870942

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

    我能夠存取和修改 scale 屬性的元件並達到預期的結果。

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

    回覆
    0
  • 取消回覆