[Three.js] 3D 물체를 자동으로 움직이게 하기

배경

지구는 도니까 3D 물체도 움직이게 만들고 싶었다.

고양이가 아니라 구형을 자동으로 돌려보자!

---

저번에 만들어 놓은 Circle 함수에 움직일 수 있게 코드를 넣어보자

 

2024.03.10 - [Study/React] - [Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자

[Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자

 

 

전체 코드

 

const Circle = () => {
    const circleRef = useRef();

    useFrame(() => {
 	catRef.current.rotation.y += 0.009;
        catRef.current.rotation.x += 0.01;
    });
    return (
        <>
            <group ref={circleRef}>
                <OrbitControls/>
                <ambientLight intensity={0.25}/>
                <directionalLight color="white" position={[10, 10, 10]}/>
                <mesh>
                    <sphereGeometry args={[1, 32, 32]}/>
                    <meshStandardMaterial color="yellow"/>
                </mesh>
            </group>
        </>
    );
};

 

useRef()

함수형 컴포넌트에서 DOM 요소나 다른 React 요소에 대한 참조를 생성할 때 사용한다.

circleRef.current.rotation.y += 0.003;

 

circleRef를 참조된 객체를 y축으로 매 프레임마다 회전한다.

  <group ref={circleRef}>
  
  </group>

group 객체에 circleRef 참조해서 회전을 매 프레임마다 업데이트한다.

circleRef를 참조해서 group안에 있는 객체를 접근할 수 있다.

 

 

useFrame()

반복적인 애니메이션 또는 프레임별 업데이트를 처리할 때 사용되는 함수

    useFrame(() => {
        catRef.current.rotation.y += 0.009; // y축을 기준으로 회전
        catRef.current.rotation.x += 0.01; // x축을 기준으로 회전
    });

 

y축을 기준으로 회전 각도를 프레임마다 0.009만큼 증가

x축을 기준으로 회전 각도를 프레임마다 0.01만큼 증가

 

 

움직이는 영상

 

 

참조 이슈

https://github.com/YooGenie/react-study/issues/51

3D 물체를 자동으로 움직이게 하기 · Issue #51 · YooGenie/react-study