[Three.js] Three.js 알아보기

Three.js를 사용하여 3D 시뮬레이션을 만들어 보려고 한다. 요즘 물류 시스템에도 재고 흐름들을 보기 위해 3D 시뮬레이션을 사용한다고 하는데 여기서 사용할 것이 바로 Three.js라 이 Three.js API에 대한 내용을 정리한다.

Three.js

특정 웹이 아닌 일반적인 웹(Web) 상에서 3D 상의 그래픽을 표현하기 위해 자바스크립트로 만들어진 API다. 현재 오픈소스로 깃허브에 공개 되어 있으며, 해당 페이지가 있어 메뉴얼도 제공을 한다.

https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

three.js docs

threejs.org

Three.js는 WebGL로 인해 GPU에서 가속되는 3차원 컨텐츠를 만들 수 있게 되었다.

WebGL
1. WebGL은 OpenGL 2.0 베이스로 만들어졌으며 Web 기반의 그래픽 라이브러리
- 즉, WebGL에서 복잡하고 길게 사용하는 코드들을 Three.js를 사용하면서 간단하고 쉽게 코드들을 사용하여 구현할 수 있다.
2. 자바스크립트로 사용
3. 플러그인의 사용없이 3차원 컴퓨터 그래픽스 API 제공하는 캔버스 HTML 요소 일부
4. 구글 크롬에서도 사용 가능

요약

웹 페이지(Web Page)에서 3D 객체들을 쉽게 렌더링을 할 수 있도록하는 자바스크립트 기반 3D 라이브러리

Three.js의 코드

Three.js는 1개의 자바스크립트 파일로 구성되어 있다. <head> 태그 안에 아래의 코드를 넣어서 사용하면 된다.

<script src="js/three.min.js"></script>

라고 하면 된다고 하는데, 해당 파일을 찾으려고 하니 없어서 three.module.js를 사용하면 된다고 한다.

출처

https://ko.wikipedia.org/wiki/Three.js

저작자표시

'IT > Three.js' 카테고리의 다른 글

[Three.js] Three.js OrbitControls WASD 카메라 이동하는 방법 (0)	2024.12.16
[Three.js] Three.js OrbitControls 카메라 부드러운 이동하기 (0)	2024.12.16
[Three.js] Three.js 그리드(grid) 생성 및 예제(gridHelper) (1)	2024.12.13
[Three.js] Three.js 장면(Scene) 생성 및 예제 (0)	2024.12.13
[Three.js] Three.js Script 방식 정리 (0)	2024.12.13