Three.js는 자바스크립트 3D 라이브러리(JavaScript 3D library)로 웹 브라우저에서 3D를 표현(Rendering, 렌더링)할 수 있게 해 줍니다.
Three.js 사이트(https://threejs.org/)
Three.js는 오픈 소스 프로젝트로 GitHub에 공개되어 있다. (https://github.com/mrdoob/three.js/)
Three.js는 GitHub에서 다음처럼 설명하고 있습니다.
JavaScript 3D library
The aim of the project is to create an easy to use, lightweight, cross-browser, general purpose 3D library.
The current builds only include a WebGL renderer but WebGPU (experimental), SVG and CSS3D renderers are also available asaddons.
자바스크립트 3D 라이브러리
프로젝트의 목표는 범용 3D 라이브러리로 모든 웹 브라우저(cross-browser)에서 가볍(lightweight)고 쉽게 사용(easy to use)할 수 있게 하는 겁니다.
현재 빌드에는 WebGL 렌더러만 포함되어 있습니다. 그러나 WebGPU(실험적), SVG 그리고 CSS3D 렌더러를 애드온으로 사용할 수 있습니다.
Three.js는 WebGL로 렌더링 됩니다.
WebGL(Web Graphics Library)은 HTML5의 Canvas 요소(<canvas>)에 OpenGL ES 2.0의 3D 그래픽 API를 이용하여 렌더링 합니다.
즉, Three.js는 WebGL를 기반으로 3D 라이브러리를 만든 자바스크립트로 웹 브라우저에서 쉽게 3D를 표현(Rendering, 렌더링)할 수 있습니다.
Three.js를 이용하여 개발하는 방법은 다음과 같습니다.
- Node.js로 Three.js를 설치하고 Node 패키지를 생성하여 개발
- 웹 페이지에서 <script> 태그로 CDN에 있는 Three.js를 가져와서 개발
- Three.js를 다운로드하여 웹 페이지에서 <script> 태그로 로드하여 개발
이어서 개발하는 방법에 대해 설명하겠습니다.