🔎 three.js란?
Three.js는 웹브라우저에서 3차원 컴퓨터 그래픽스 애니메이션 응용을 만들고 표현하기 위해 사용되는 자바스크립트 라이브러리이자 API입니다. WebGL을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>three.js</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<canvas id='three-canvas'></canvas>
</body>
</html>WebGL은 Web Graphics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 자바스크립트 API입니다. WebGL은 기본적으로 HTML의 Canvas 요소 위에 그려지기 때문에 위와 같이 html을 간단하게 세팅합니다.
🗂 기본 구성
three.js는 크게 scene, mesh, camera, light, renderer로 구성됩니다. 연극에 비유를 하자면 scene은 무대, mesh는 배우, light는 조명이라고 볼 수 있습니다. renderer는 scene과 camera 데이터를 넘겨 받아서 화면 안에 이미지로 렌더링 해주는 역할을 합니다.
📍renderer
const canvas = document.querySelector("#three-canvas");
//renderer의 canvas를 three-canvas로 지정
//antialias : 계단 현상(깨진 패턴을) 최소화, 성능은 좀 떨어질 수 있음
const renderer = new THREE.WebGL1Renderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);canvas위에 연극을 생성하기 위해 WebGL1Renderer 파라미터에 canvas를 추가합니다. 그리고 setSize를 통해 renderer의 크기를 설정합니다. 렌더링할 구역의 높이와 너비는 보통 브라우저 윈도우의 크기가 됩니다.
WebGL1Renderer 파라미터에는 계단 현상(깨진 패턴)을 최소화하는 antialias를 추가했습니다. 이외에도 투명도를 조절하는 alpha, mesh의 지글거림 효과를 조절할 수 있는logarithmicDepthBuffer 등을 통해 활용해 renderer를 설정할 수 있습니다. (https://threejs.org/docs/#api/en/renderers/WebGLRenderer.antialias 참고)
📍scene
const scene = new THREE.Scene();scene은 무대 전체 요소들이 표현되는 공간입니다.
📍camera
const camera = new THREE.PerspectiveCamera(
75, //시야각
window.innerWidth / window.innerHeight, //종횡비
0.1, //near
1000 //far
);
//위치 조정
camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 1;
scene.add(camera);카메라는 Scene을 어떻게 촬영하여 보여줄지를 결정합니다. 카메라의 종류에는 원근법을 무시하는 OrthographicCamera와 원근법을 적용하여 일상생활에서 우리가 보는 것처럼 장면을 보여주는 PerspectiveCamera가 있습니다.
camera의 파라미터는 화면이 보여지는 정도를 나타내는 시야각, 화면의 비율인 종횡비, near, far로 구성됩니다. near값보다 가까이 있는 물체는 보이지 않고, far보다 멀리있는 물체는 보이지 않습니다.
position을 통해 카메라의 x,y,z값을 설정해 위치를 조정할 수 있습니다.
📍mesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
//color: 0xff0000,
// color: "red",
color: "#ff0000",
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);장면 위에 올라가는 객체를 생성하기 위해 Mesh 생성자를 활용합니다. Mesh는 geometry(모양)와 material(재질)로 구성됩니다. BoxGeometry 기본 정육면체를 생성하고 MeshBasicMaterial를 통해 색을 지정합니다. 이렇게 생성된 mesh는 camera와 마찬가지로 scene에 추가해야합니다.
📍light
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.x = 1;
light.position.z = 2;
scene.add(light);light에는 다양한 종류가 있습니다. DirectionalLight는 무한대의 먼거리에서 모든 오브젝트에 일괄적으로 같은각도로 비추는 빛, 태양과 같은 빛입니다. light도 camera와 마찬가지로 position으로 위치를 조절하고 장면에 추가합니다.
renderer.render(scene, camera);카메라와 장면 설정이 끝나면 renderer.render를 통해 화면을 출력합니다.
짜잔 정육면체가 canvas 위에 나타난 것을 확인할 수 있습니다.
