Three JS

웹에서 3D를 구현하려면 WebGL이라는 복잡 API를 직접 다뤄하지만, Three.js는 WebGL 코드를 쉽고 직관적으로 쓸 수 있도록 감싸주는 역할을 한다. Next js에서 Typescript와 함께 three js를 설치하는 방법을 다룬다.

Three.js – JavaScript 3D library

🔹Three js 사용 순서

1. Scene 생성
2. Camera 생성
3. Renderer 생성 및 DOM에 mount
4. Mesh (도형 + 재질) 생성
5. Scene에 Mesh 추가
6. requestAnimationFrame으로 애니메이션 루프
7. useEffect 클린업 처리

🔹의존성 패키지 추가

npm install three

🔹three 모듈을 불러온다.

import * as THREE from 'three';