Useframe verursacht Three.webglrenderer: Kontextverlust

Question

Ich versuche, die Größe einer React 3 Fibre drei Box-Komponente mithilfe von useFrame zu animieren. Die Geometrie funktionierte einwandfrei, bis ich die Funktion „useFrame“ hinzufügte, die dazu führte, dass der Browser einen THREE.WebGLRenderr: Context Lost-Fehler auslöste und ein erneutes Rendern verhinderte.

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

Ich habe auch versucht, den Inhalt von useFrame durch barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3] zu ersetzen, aber es hat zum gleichen Ergebnis geführt.

Ich weiß, dass ich die Grafikfunktionen des Browsers überlaste, aber ich weiß nicht genau, warum oder wie ich es in useFrame einschränken kann.

Update:

Ich kann auf die scale Eigenschaften der Komponente zugreifen und diese ändern und die erwarteten Ergebnisse erzielen.

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