이 문서는 웹 브라우저에서 3D 그래픽을 구현하기 위한 JavaScript 라이브러리인 Three.js 의 기본 사용법을 소개합니다. Three.js 는 WebGL, Canvas, SVG 등 다양한 렌더러를 지원하며, 복잡한 3D 엔진 설정을 추상화해 줍니다. 주요 구성 요소인 Scene(장면), Renderer(렌더러), Camera(카메라), Mesh(메시/객체) 의 생성 및 연결 방법을 설명하고, 기본 기하학적 도형(P…
9 min read
Three.js 시작 가이드 (Aerotwist)
Source
Evernote/Technote scraps/Getting Started with Three.js Aerotwist.md
Summary
이 문서는 웹 브라우저에서 3D 그래픽을 구현하기 위한 JavaScript 라이브러리인 Three.js 의 기본 사용법을 소개합니다. Three.js 는 WebGL, Canvas, SVG 등 다양한 렌더러를 지원하며, 복잡한 3D 엔진 설정을 추상화해 줍니다. 주요 구성 요소인 Scene(장면), Renderer(렌더러), Camera(카메라), Mesh(메시/객체) 의 생성 및 연결 방법을 설명하고, 기본 기하학적 도형(Primitives) 과 재질(Materials) 적용에 대한 기초를 다룹니다. 또한 브라우저별 지원 현황(당시 기준 Chrome 이 가장 우수) 과 성능 최적화의 중요성을 언급합니다.
Key Points
Three.js 는 브라우저 기반 3D 개발을 위한 오픈소스 JavaScript 라이브러리이며, WebGL, Canvas, SVG 렌더러를 선택할 수 있습니다.
3D 장면 구성의 4 가지 핵심 요소: Scene(장면), Renderer(렌더러), Camera(카메라), Object/Mesh(객체).
WebGL 렌더러는 GPU 를 활용하여 CPU 부하를 줄일 수 있어 성능상 유리합니다.
기본적인 3D 객체는 SphereGeometry, CubeGeometry 등의 Primitives(기본 도형) 을 사용하여 생성할 수 있습니다.
객체에 시각적 특성을 부여하기 위해 Basic, Lambert, Phong 등의 Material(재질) 을 적용합니다.
당시 기준 브라우저 지원 현황: Chrome 이 가장 빠르고 지원이 좋으며, Firefox 도 우수합니다. IE9 는 Canvas 만 지원합니다.