useframe으로 인해 three.webglrenderer:컨텍스트가 손실되었습니다.

Question

useFrame을 사용하여 React 3 Fiber drei Box 구성 요소의 크기에 애니메이션을 적용하려고 합니다. useFrame 함수를 추가하기 전까지는 형상이 제대로 작동했는데, 이로 인해 브라우저에서 THREE.WebGLRenderr: Context Lost 오류가 발생하고 다시 렌더링되지 않게 되었습니다.

으아아아

useFrame의 내용을 barRef1.current.args = [1,1,Math.sin(state.clock.elapsedTime) + 3]로 바꾸려고 시도했지만 결과는 동일했습니다.

브라우저의 그래픽 기능이 과부하되고 있다는 것을 알고 있지만 useFrame에서 이를 제한하는 이유와 방법을 정확히 모르겠습니다.

업데이트:

구성요소의 scale 속성에 액세스하고 수정하여 예상한 결과를 얻을 수 있습니다.

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

Answer 1

구성요소의 scale 속성에 액세스하고 이를 수정하여 예상한 결과를 얻을 수 있습니다.

으아악