我尝试使用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;
}
)
1条答案
按热度按时间4urapxun1#
我能够访问和修改
scale
属性的组件,并获得了预期的结果。