useframe导致3.Webglrenderer:上下文丢失

Question

我正在尝试使用useFrame动画一个React 3光纤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;
}
)

Answer 1

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

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