我正在尝试使用 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 的内容,但它产生了相同的结果。 p>
我知道我正在超载浏览器的图形功能,但我不知道到底为什么或如何在 useFrame 中限制它。
更新:
我能够访问和修改 scale
属性的组件并达到预期的结果。
useFrame( (state) => { barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3; } )
我能够访问和修改
scale
属性的组件并达到预期的结果。