useframe导致three.webglrenderer: 上下文丢失
P粉025632437
P粉025632437 2024-03-19 22:29:33
0
1
426

我正在尝试使用 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粉025632437
P粉025632437

全部回复(1)
P粉841870942

我能够访问和修改 scale 属性的组件并达到预期的结果。

useFrame(
    (state) => {
      barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3;
    }
  )
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板