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

1. Three.js npm 패키지 설치

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

2. 3D 모형 불러오기 ( Sphere.js )

import React from "react";
import { Sphere } from "@react-three/drei";

function Sphere() {
  return <Sphere visible args={[1, 100, 200]} scale={2}></Sphere>;
}

export default Sphere;
  • Three.js 에서 제공하는 Sphere 컴포넌트를 호출한다
  • args 에 들어가는 인자는 순서대로 반지름 / 너비 / 높이 이다
  • scale 속성값으로 모형의 보여지는 크기를 조절할 수도 있다

3. 만든 모형 컴포넌트 호출 ( App.js )

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

function App() {
  return (
    <>
      <div className="container">
        <Canvas className="canvas">
          <Suspense fallback={null}>
            <Sphere />
          </Suspense>
        </Canvas>
      </div>
    </>
  );
}

export default App;
  • Canvas 컴포넌트로 전체를 감싸주고
  • Suspense 컴포넌트로 불러올 모형을 감싸준다
  • 컨텐츠 검색을 못할경우 사용하는 대비책 ‘Suspense’ 이다

4. 랜더링 된 3D 모형 확인

👆 3D 모형이 생성되긴했지만 빛 & 입체감이 없어서 확인이 어렵다

5. 모형에 슬라임 효과주기 + 색상 & 밝기 추가하기

  • Sphere.js
import React from "react";
import { Sphere, MeshDistortMaterial } from "@react-three/drei";

function Sphere() {
  return (
    <Sphere visible args={[1, 100, 200]} scale={2}>
      <MeshDistortMaterial
        color="#8352FD"
        attach="material"
        distort={0.5}
        speed={2}
        roughness={0.5}
      />
    </Sphere>
  );
}

export default Sphere;
  • MeshDistortMaterial 컴포넌트를 불러와서 속성값을 입력해준다
  • distort 👉 왜곡 (흐물거리는 정도)
  • speed 👉 왜곡 속도
  • roughness 👉 거칠기
  • App.js
import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import Sphere from "./components/Sphere";
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}>
            <Sphere />
          </Suspense>
        </Canvas>
      </div>
    </>
  );
}

export default App;

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

  • ambientLight 에서 intensity 속성값은 빛의 강도
  • directionalLight 에서 position 속성값은 빛의 방향

👆 빛 & 밝기를 추가해주고 ‘distort’ 효과를 주니 입체적인 3D 슬라임효과를 가진다

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

  • App.js
import { Canvas } from "@react-three/fiber";
import React, { Suspense } from "react";
import Sphere from "./components/Sphere";
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}>
            <Sphere />
          </Suspense>
        </Canvas>
      </div>
    </>
  );
}

export default App;

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

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

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

<OrbitControls enableZoom={false} />

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

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