threejs-practice-lab

Three.js의 기본 구조를 직접 구현하면서 익히기 위한 연습 저장소입니다.

첫 목표

처음에는 완성된 데이터 시각화를 만들지 않습니다. 아래 구조를 직접 손으로 구현하고 이해하는 것이 목표입니다.

Scene
 ├─ Camera
 └─ Mesh
      ├─ Geometry
      └─ Material

Renderer
  ↓
Scene + Camera
  ↓
Canvas

실행

npm install
npm run dev

브라우저에 Vite 개발 서버 주소가 표시됩니다.

Lesson 01 — Cube

src/main.ts의 TODO를 위에서부터 직접 구현합니다.

1. three import
2. Scene 생성
3. PerspectiveCamera 생성
4. WebGLRenderer 생성
5. renderer의 canvas를 #app에 추가
6. BoxGeometry 생성
7. MeshBasicMaterial 생성
8. Mesh 생성
9. mesh를 scene에 추가
10. camera 위치 조절
11. renderer.render(scene, camera) 호출
12. animation loop 작성
13. cube 회전

이 단계에서 답할 수 있어야 하는 질문

• Scene은 왜 필요한가?
• Camera는 실제 물체인가, 관찰 기준인가?
• Geometry와 Material은 왜 분리되어 있는가?
• Mesh는 무엇을 결합하는가?
• Renderer는 정확히 무슨 일을 하는가?
• Camera를 움직이지 않으면 왜 물체가 보이지 않을 수 있는가?
• animation loop는 왜 반복해서 render해야 하는가?

다음 단계

Lesson 01을 끝낸 뒤 순서대로 진행합니다.

01 Cube
   ↓
02 Position / Rotation / Scale
   ↓
03 Multiple Objects
   ↓
04 OrbitControls
   ↓
05 Numbers → 3D Position/Height
   ↓
06 Small Data Visualization

Shader, WebGPU, 복잡한 데이터는 아직 사용하지 않습니다.