0

I am trying to animate the size of a React 3 Fiber drei Box component using useFrame. The geometry works fine up until I add the useFrame function, which causes the browser to throw a THREE.WebGLRenderr: Context Lost error and prevents any re-renders.

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 have also tried to replace the contents of the useFrame with barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3] but it produced the same result.

I understand I am overloading the browser's graphics capabilities, but I do not know exactly why or how to throttle it within the useFrame.

UPDATE:

I was able to access and modify the components of the scale property and achieve the desired results.

  useFrame(
    (state) => {
      barRef1.current.scale.y = Math.sin(state.clock.elapsedTime) + 3;
    }
  )
Jacob Rita
  • 31
  • 3
  • Not sure you what you are referring as `depth` normally you can use position, scale, rotation. I’m pretty sure you just trying to write to some protected variables here – antokhio Apr 09 '23 at 17:10
  • I tried to use `scale` instead as `barRef1.current.scale = [1,1,Math.sin(state.clock.elapsedTime) + 3]` but I received the error `Uncaught TypeError: Cannot assign to read only property 'scale' of object '#'`, which seems to suggest that `scale` is actually a protected variable. – Jacob Rita Apr 10 '23 at 18:53
  • While I was not able to modify `scale` directly in the `useFrame` I was able to access its components (eg- barRef1.current.scale.x) and use them successfully. I assume this is what @antokhio was referring to and it was my oversight in reading his response. – Jacob Rita Apr 10 '23 at 19:40

1 Answers1

0

I was able to access and modify the components of the scale property and achieve the desired results.

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