[ThreeJS] ThreeJS 기본 구성 요소

ThreeJS란?

ThreeJS란 WebGL(Web Graphic's Library)을 쉽게 사용할 수 있도록 해주는 JS기반 라이브러리이다.

Graphic들은 html canvas 위에 그려지는데 이를 개발자가 좀 더 편하게 다루기 위해서 사용된다.

---

ThreeJS의  기본 구성 요소

기본 구성 요소에는 4가지(Renderer, Scene, Camera, Mesh)가 있다.

영화로 예를 들어 설명하자면 Renderer는 영화를 송출하는 기기, Scene은 영화의 배경 혹은 장면, Camera는 영화를 찍고 있는 카메라(시점), Mesh는 영화의 등장인물이나 주위 물체를 의미한다.

Fundamentals

 

1. Renderer

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);

renderer라는 const 상수를 THREE.WebGLRenderer 객체로 선언하고 setSize를 통해 사이즈를 윈도우창크기만큼 초기화시켰다.

그 후 document.body에 renderer.domElement를 추가해주고 나서 render함수에 scene과 camera를 인자로 넣어주면 화면에 렌더링된다.

2. Scene

const scene = new THREE.Scene();
scene.add(mesh);

scene이라는 const 변수를 THREE.Scene 객체로 선언했다. add함수에 인자로 mesh를 넣으며 scene을 만든다.

3. Camera

 3-1. Perspective Camera

원근감이 존재하는 카메라

→Perspective Camera에 필요한 정보 4가지

카메라로부터 절도체 면까지의

최소거리(near)

최대거리(far)

촬영하는 카메라의 가로/세로 비율(aspect)

카메라의 시야각인(fov, Field Of View)가 필요하다.

Perspective Camera

const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth/window.innerHeight,
  0.1,
  100
);

PerspectiveCamera가 요구하는 인자

 3-2. Orthographic Camera

원근감이 없는 카메라

 

카메라의 위치는 아래의 코드같이 정할 수 있다.

camera.position.z = 5;
camera.position.y = 1;

축을 나타내는 변수는 아래의 그림과 같다.

4. Mesh

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});
const mesh = new THREE.Mesh(geometry,material);

Mesh가 요구하는 인자

 

Mesh를 보면 인자로 geometry와 material을 받고 있다.  그렇기에 geometry와 material을 각각의 해당객체로 선언해 주고 mesh에 넣어 물체를 만든 모습이다.

BoxGeometry가 요구하는 인자

Material이 요구하는 인자

---

Code with detail

빨간색의 정육면체를 렌더링하는 코드

import "./style.css";
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth/window.innerHeight,
  0.1,
  100
);
camera.position.z = 5;
camera.position.y = 1;
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({
  color: 0xff0000
});
const mesh = new THREE.Mesh(geometry,material);

scene.add(mesh);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

window.addEventListener('resize', ()=>{
  renderer.setSize(window.innerWidth,window.innerHeight);
  renderer.render(scene,camera);
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.render(scene,camera);
});
renderer.render(scene,camera);