React Three.js 애니메이션 적용, obj 파일 추가

안녕하세요

오늘은 @react-three/fiber의 useFrame을 사용하여 geometry에 애니메이션을 추가해 보겠습니다.

 

 

애니메이션

---

Vanila JS에서는 requestAnimationFrame을 사용했지만 react에서는 useFrame을 사용합니다.

 

y 축으로 계속 회전하는 애니메이션입니다.

import { useFrame } from '@react-three/fiber';
import React, { useRef } from 'react';

const ReactModel = (props) => {
    
    const modelRef = useRef();

    useFrame(() => {
        modelRef.current.rotation.y += 0.01;
    })

    return(
        <mesh position={[0, 0, 0]} ref={modelRef} castShadow>
            <torusKnotBufferGeometry
                attach='geometry'
                args={[10, 1, 300, 20, 6, 10]}
            />
            <meshPhysicalMaterial
                attach='material'
                color={"#61DBFB"}
            />
        </mesh>
    )
};

export default ReactModel;

useRef로 mesh에 접근 후 roatation 값을 조절합니다.

위치를 이동하고 싶으시면 position 값을 사용하시면 됩니다.

 

 

OBJ 파일 추가

---

import React from 'react';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import userObj from '../obj/user.obj';
import { useLoader } from '@react-three/fiber';

const UserModel = (props) => {
    
    const obj = useLoader(OBJLoader, userObj);

    return (
        <mesh position={[0, -20, 15]}>
            <primitive object={obj} scale={4.0}/>
        </mesh>
    );
};

export default UserModel;

* obj 파일이 있어야 합니다.

위 코드와 같이 작성 후 Canvas 안에다 import 해주시면 됩니다.

주의하셔야 할 점은 useLoader안에 경로를 직접 넣으시면 안됩니다.

const obj = useLoader(OBJLoader, '../obj/user.obj');

 

 

 

조그만 obj 가 생겼네요 :)

 

 

 

 

공부해야 할게 많이 생겨서 이제 three.js 관련 글은 앞으로 안 올라올 것 같습니다.

감사합니다!