useframe provoque three.webglrenderer : contexte perdu

Question

J'essaie d'animer la taille d'un composant React 3 Fiber drei Box à l'aide de useFrame. La géométrie fonctionnait bien jusqu'à ce que j'ajoute la fonction useFrame, ce qui provoquait une erreur THREE.WebGLRenderr: Context Lost du navigateur et empêchait tout nouveau rendu.

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

J'ai également essayé de remplacer le contenu de useFrame par barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3] mais cela a produit le même résultat.

Je sais que je surcharge les capacités graphiques du navigateur, mais je ne sais pas exactement pourquoi ni comment la limiter dans useFrame.

Mise à jour :

Je peux accéder et modifier les scale propriétés du composant et obtenir les résultats attendus.

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

Answer 1

Je peux accéder et modifier les scale propriétés du composant et obtenir les résultats attendus.

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