[React] 리액트에서 3D 모델링파일 불러오기 & 자동회전 시키기 (Three.js)

리액트에서 Three.js 사용을 위한 개발환경 만들기

1. Three.js npm 패키지 설치

npm install @react-three/drei @react-three/fiber

2. 3D 모델링 다운받아오기

https://sketchfab.com/

sketchfab 페이지로 접속 후 ‘EXPLORE’ 탭으로 들어간다

우측상단에 다운로드표시가 있을경우 무료다운이 가능하다

상세 페이지로 넘어와서 다운로드 클릭

GLB Converted format 다운로드

3. 3D 모델링 파일을 리액트 jsx 파일로 변환시키기

images 폴더를 생성하고 다운받은 .glb 파일을 넣어준다

해당경로로 들어가서 npx gltfjsx 파일명.glb
명령어로 glb 파일을 코드로 변환시켜준다
👉 npx gltfjsx bicycle.glb

👆 bicycle.glb 모델링이 Bicycle.jsx 파일로 변환되어 생성되었다

4. 3D 모델링 출력해보기

Bicycle.jsx

export 를 default 로 설정해주기

useGLTF .glb 파일의 경로설정

만약 모델링이 작거나 크다면 scale 설정

App.js

import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import Bicycle from "./images/Bicycle";
import "./App.css";

function App() {
  return (
    <>
      <div className="container">
        <Canvas className="canvas">
          <ambientLight intensity={0.5} />
          <directionalLight position={[-2, 5, 2]} intensity={1} />
          <Suspense fallback={null}>
            <Bicycle />
          </Suspense>
        </Canvas>
      </div>
    </>
  );
}

export default App;

밝기 관련한 컴포넌트를 2개 추가해줬다

ambientLight 에서 intensity 속성값은 빛의 강도

directionalLight 에서 position 속성값은 빛의 방향

👆 3D 모델링 출력

5. 모형 컨트롤 하기 (확대 & 회전시키기)

App.js

import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import Bicycle from "./images/Bicycle";
import "./App.css";
import { OrbitControls } from "@react-three/drei";

function App() {
  return (
    <>
      <div className="container">
        <Canvas className="canvas">
          <OrbitControls />
          <ambientLight intensity={0.5} />
          <directionalLight position={[-2, 5, 2]} intensity={1} />
          <Suspense fallback={null}>
            <Bicycle />
          </Suspense>
        </Canvas>
      </div>
    </>
  );
}

export default App;

OrbitControls 컴포넌트를 추가해주면 3D 모형을 컨트롤 할 수 있게 된다

👆 마우스로 자유롭게 회전시키고 확대할수 있다

❗ 만약에 모형 확대를 막고 싶다면 enableZoom 속성을 추가해주면 된다

<OrbitControls enableZoom={false} />

6. 3D 모델링 자동 회전시키기

BicycleRotate.js

import { useFrame } from "@react-three/fiber";
import React, { useRef } from "react";
import Bicycle from "../images/Bicycle";

function BicycleRotate() {
  const BicycleRef = useRef(null);

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

  return (
    <mesh ref={BicycleRef}>
      <Bicycle />
    </mesh>
  );
}

export default BicycleRotate;

BicycleRotate.js 파일을 생성한다

useRef hook 을 통해 3D 모델링 파일을 참조시켜서

Three.js에서 제공하는 useFrame hook 으로 y축방향 rotate를 걸어준다

App.js 에서 BicycleRotate.js 으로 교체해서 다시 출력해준다

👆 자동으로 회전하는 3D 모델링 (속도를 조절할 수도 있다)

Three.js 를 이용한 3D 모형코드

https://github.com/wavescats/Three_3D-Model