useframe causes three.webglrenderer: context lost
P粉025632437
P粉025632437 2024-03-19 22:29:33
0
1
428

I'm trying to animate the size of a React 3 Fiber drei Box component using useFrame. The geometry was working fine until I added the useFrame function, which caused the browser to throw a THREE.WebGLRenderr: Context Lost error and prevent any re-rendering.

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>
  )

I also tried replacing the contents of useFrame with barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) 3] but it produced the same result.

I know I'm overloading the browser's graphics capabilities, but I don't know exactly why or how to limit it in useFrame.

renew:

I am able to access and modify the scale property of the component and achieve the expected results.

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

P粉025632437
P粉025632437

reply all(1)
P粉841870942

I am able to access and modify the scale property of the component and achieve the expected results.

useFrame(
    (state) => {
      barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) 3;
    }
  )
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template