three.js ❓
- JavaScript 라이브러리
- MIT 라이센스
- Right above webGL
WebGL
- JavaScript API
- 대부분의 브라우저와 호환 가능
- GPU를 사용
⚠️ 캔버스에 삼각형 하나 띄우는데 100줄의 코드를 필요로 할 정도로 복잡하므로 three.js를 사용
구성 요소
✨ Scene
const scene = new THREE.Scene()- 컨테이너의 역할
- 오브젝트, 모델, 빛의 배경
✨ Object
- Primitive Geometries
- 임포트 된 모델
- 입자, 빛 등등 많은 것들이 Object가 될 수 있음
✨ Mesh
- Geometry
// - BoxGeometry 초기화 하기
// 세 가지 인자는 박스의 크기에 대응한다
const geometry = new THREE.BoxGeometry(1, 1, 1)- Material
// - MeshBasicMaterial 초기화 하기
const material = new THREE.MeshBasicMaterial({ color: '#E6E6FA' })이렇게 생성한 geometry와 material을 기반으로 mesh를 초기화 한 뒤 scene에 추가한다
const mesh = new THREE.mesh(geometry, material)
scene.add(mesh)✨ Camera
const sizes = { width: 800, height: 600 }
// 1st parameter - fov, vertical vision angle
// 2nd parameter - aspect ratio
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
scene.add(camera)- 눈에 보이지 않는다
- 렌더링 시 pov를 제공한다
- 여러가지 타입의 카메라가 있다
✨ Renderer
- 카메라 pov의 scene을 렌더링한다
- 캔버스에 결과물을 그리기 위해 three.js는 WebGL을 사용한다
링크
three.js Official Repository
three.js Releases
three.js Official Document
Demos
