[three.js] 3D 라이브러리 & 앱의 구조

8303 단어 three.jsthree.js

해당 시리즈는 three.js 의 공식 튜토리얼을 참고하고 있습니다.

three.js 란?

웹페이지에서 3D 객체를 쉽게 렌더링 하도록 도와주는 Javascript 3d 라이브러리

> WebGL 이란?

점, 선, 삼각형만을 그리는 단순한 시스템
WebGL로 3차원을 구현한다면 scenes, light, material, phong 등 일일히 복잡하게 코딩해야한다.

> closure 란?

three.js 앱의 구조

- Renderer

Scene과 Camera 객체를 넘겨받아 카메라의 frustum안 3D 씬의 일부를 2차원 이미지로 렌더링

- Scene Graph

다수의 Mesh, Object3D, Group, Light, Camera로 이루어진 트리 구조와 유사

- Scene

Scene Graph의 최상위 노드
(배경색, 안개 등의 요소를 포함)
포함된 객체들 또한 부모/자식의 트리구조 : 각 객체의 유래와 방향성을 나타냄.
즉, 자식 객체의 위치(position)와 방향(orientation)이 부모 기준

- Camera

Scene Graph안에 굳이 포함될 필요는 없음.
그치만 다른 객체들과 마찬가지로 Camera도 다른 객체의 자식객체가 될 수 있음

- Mesh

어떤 Meterial로 하나의 Geometry를 그리는 객체

Meterial과 Geometry는 재사용이 가능
여러 개의 mesh가 하나의 Meterial 또는 Geometry를 동시에 참조 가능
ex) 위치가 다른 두 개의 정육면체를 만들 때, 두개의 Mesh를 만들어야하는데 하나의 Meterial 또는 Geometry를 동시에 참조하면 됨.

- Geometry

기하학 객체의 정점 데이터
three.js의 내장된 Geometry : 원시모델 참고

BoxGeometry

const width = 8;  // ui: width
const height = 8;  // ui: height
const depth = 8;  // ui: depth
const geometry = new THREE.BoxGeometry(width, height, depth);

- Meterial

Geometry를 그리는데 필요한 표면속성
하나의 Material는 여러개의 Texture를 사용가능

- Texture

이미지나 파일에서 로드한 이미지, canvas로 생성한 이미지 또는 다른 Scene 객체에서 렌더링한 결과물에 해당

- Light

여러 종류의 광원

Hello Cube !

type="module" -> import를 통해 three.js 모듈을 불러올 수 있음

<script type="module">
import * as THREE from '../../build/three.module.js';
</script>

canvas 태그 작성

<body>
  <canvas id="c"></canvas>
</body>

canvas의 element를 참조한 이후, WebGLRenderer(렌더러의 종류 중 하나) 생성

<script type="module">
import * as THREE from '../../build/three.module.js';
function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  ...
</script>
  • 렌더러의 종류
    과거 CSSRenderer, CanvasRenderer가 있었고, 나중에는 아마 WebGL2Renderer, WebGPURenderer가 이 자리를 대신할듯. 지금은 3차원 세상을 canvas에 그려줄 WebGL, WebGLRenderer를 사용할 예정
  • canvas 요소를 document에 삽입 : 동적으로 생성하는 것 보다 직접 삽입하는 것이 연습으로 해볼만함

PerspectiveCamera(원근 카메라) 객체 생성

const fov = 75;
const aspect = 2;  // the canvas default
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  • fov : field of view(시야각)의 줄임말
  • Three.js의 대부분이 각도 단위로 호도(radians)를 사용하는데, 원근카메라만 특이하게 도(degrees)를 인자로 받는다는 점
  • aspect는 canvas의 가로 세로 비율
  • near와 far는 카메라 앞에 렌더링되는 공간 범위를 지정하는 요소
  • near와 far 평면의 높이는 시야각(fov), 너비는 시야각과 aspect에 의해 결정
TIL. NO6. JAVASCRIPT(3)
[Prep.05]Git Workflow

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage