three.js에 대해서 알아보자!

저는 최근에 프로젝트에서 3D를 구현해야 할 일이 생겨

이렇게 three.js에 대해서 공부하고 사용하고자 글을 쓰게 되었습니다

---

❓ three.js란?

three.js는 웹페이지에 3D 객체를 더욱더 쉽게 렌더링 할 수 있도록 도움을 주는 JavaScript의 3D 라이브러리입니다

3D 객체를 렌더링하기 위해서 webGL이라는 것을 사용합니다
webGL이 있지만 three.js를 쓰는 이유는 
webGL이 점, 선, 삼각형만 그릴 수 있어 코드양이 굉장히 많아지기 때문입니다

---

🏗️ three.js의 기본 구조

#three.js의 구조

Renderer

• three.js의 핵심 객체입니다
• Scene과 Camera 객체를 넘겨 받아서 3D 장면을 2D 화면에 그려주는 역할을 합니다
• Three.js에서는 WebGLRenderer를 이용하여 웹 페이지의 canvas에 3D 장면을 렌더링합니다

Scene graph

• Scene Graph는 트리(Tree) 구조를 기반으로 구성되며 주요 요소로는 Scene, Mesh, Light, Group, Object3D, Camera 등이 있습니다
• 위 사진에서 파란 배경입니다
• Scene이 최상위 노드입니다
• 부모 요소가 움직이면 자식도 함께 움직입니다

Camera

• Scene객체를 촬영하여 어떻게 보여줄 것인가를 결정합니다
• 같은 Scene이라도 카메라의 위치 및 기타 설정값들을 통해서 다른 화면을 보여줄 수 있습니다
• 다른 객체와 달리 굳이 Scene graph에 포함될 필요가 없습니다
• 만약 Scene graph에 포함된다면 마찬가지로 부모 요소가 움직입니다

Mesh

• 3D화면을 구성하는 물체입니다
• 어떤 Material로 하나의 Geometry를 그리는 객체입니다

Geometry

• 객체의 정점(꼭짓점) 데이터입니다
• 아주 다양한 모양이 될 수 있습니다

Material

• Material은 메쉬의 표면을 정의합니다
• Three.js에서는 다양한 종류의 재질을 제공합니다
• 색, 밝기, 텍스처, 반질거림, 투명도 등을 설정할 수 있습니다
• 하나의 Material은 여러 개의 Texture를 사용할 수 있습니다

Light

• 주변광이나 집중광 등 다양한 광원을 통해 물체들을 3D 공간에서 볼 수 있습니다
• 생동감을 올려줍니다

Texture

• Mesh의 표면을 덮는 이미지입니다 
• Mesh에 현실감 있는 외관을 부여할 수 있습니다

---

🎯 사용하기

1. 설치하기

npm install three # npm

yarn add three # yarn

// react에서 사용하기 필수 X
npm install @react-three/fiber 
npm install @react-three/drei

 

2. 불러오기

// option 1: 다 불러오기
import * as THREE from 'three';

const scene = new THREE.Scene();


// option 2: 필요한 부분 불러오기
import { Scene } from 'three';

const scene = new Scene();

 

3. 사용하기 ( 예시 코드 )

import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

export default function App() {
  return (
    <Canvas
      id="root"
      style={{ width: "100%", height: "100%" }}
      camera={{ position: [0, 0, 5] }} // 카메라 위치
    >
      <OrbitControls /> {/* 터치 (카메라 컨트롤) */}
      <ambientLight /> {/* 빛 */}
      <mesh position={[0, 0, 0]}>{/* 큐브 MESH */}
        <boxGeometry args={[5, 5, 5]} /> {/* GEOMETRY 큐브 크기 */}
        <meshStandardMaterial color="hotpink" /> {/* MATERIAL 색상 */}
      </mesh>
    </Canvas>
  );
}

 

 

 

---

✨ 글을 마치며

이렇게 three.js에 대해서 배워보았는데 모르는 개념들이 많아서 학습하기 매우 힘들었던거 같습니다 

여러분들도 three.js를 사용해서 좋은 결과물을 내셨으면 좋겠습니다

글을 읽어주셔서 감사합니다