출처: https://blobmixer.14islands.com/
공부하게 된 계기
웹 게임 프로젝트를 진행하던 중 3D를 활용해보자는 의견을 받게 되었습니다. 저는 이번 기회에 Three.js와 R3F를 활용해 해보면 재미있는 프로젝트가 될 것 같아서 긍정적으로 받아들였습니다. 자료가 많지 않지만, 공식 문서를 참고하며 학습한 내용을 바탕으로 프로젝트에서 어떻게 활용했는지와 예제들을 통해 Three.js와 R3F에 대해 알아보겠습니다.
Three.js란 무엇인가요?
Three.js는 웹 페이지에서 3D 그래픽을 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다. 기본적으로 WebGL(Web Graphics Library) 브라우저에서 실행되는 3D 그래픽 API 위에서 동작합니다. 직접 WebGL의 복잡한 부분을 다루지 않고도 3D 객체를 생성하고 렌더링하게 해줍니다.
Three.js로 만든 사이트 예:
https://patrickheng.com/
https://2050.earth/artworks/stolen-mind
Three.js의 앱 구조
출처: https://threejs.org/manual/#ko/fundamentals
1.Renderer(렌더러):
- Three.js의 핵심 객체입니다.
- Scene와 Camera 객체를 넘겨 받아 카메라의 절두체(frustum)안 3D 씬의 일부를 평면(2차원) 이미지로 렌더링합니다.
2. Scene Graph(씬 그래프):
- Scene또는 다수의 Mesh, Light, Group, Object3D, Camera로 이루어진 트리 구조와 유사합니다.
- Scene은 Scene Graph의 최상위 노드입니다.
- background color, fog 등의 요소를 포함합니다.
- Scene에 포함된 객체들도 부모 / 자식의 트리 구조로 이루어져있다.
여기서 자식 객체의 위치와 방향은 부모 기준이다.
3.매쉬(Mesh):
- 어떤 Material로 하나의 Geometry를 그리는 객체입니다.
- 쉽게 이야기하면 하나의 덩어리라고 생각하면 됩니다.
- Material또는 Geometry여러 개의 Mesh가 하나의 Material 혹은 Geometry를 동시에 참조할 수 있다.
4.Geometry:
- 기하학 객체의 정점 데이터입니다.
- 구, 정육면체, 면, 사람 등 아주 다양한 것이 될 수 있습니다.
- Three.js는 기본적으로 내장 기하학 객체를 제공합니다. 직접 만들거나 파일에서 기하학 객체를 불러올 수도 있습니다.(glTF)
5.Material(메테리얼):
- 기하학 객체를 그리는 데 사용하는 표면 속성입니다. 색이나 밝기 등을 지정할 수 있습니다.
- 하나의 Material은 여러개의 Texture를 사용할 수 있습니다. 표면을 이미지로 덮어씌울 때 주로 사용합니다.
6.Texture(텍스처):
- 이미지나 파일에서 로드한 이미지, canvas로 생성한 이미지 또는 다른 Scene 객체에서 렌더링한 결과물에 해당합니다.
7.Lights(조명):
- 씬에서 밝기와 그림자를 설정하는데 사용됩니다.
- 여러 종류의 광원에 해당합니다.
Three.js 설치하기
- npm
npm install three - yarn
yarn add three
렌더링 해보기
만약 folder안에 node_modules package.json 파일이 없다면
- npm
npm init -y - yarn
이런 식으로 dependencies에 three가 들어가야합니다.yarn init -y
준비가 다 되었다면 공식 문서에 나와있는 예제를 같이 해보죠. 제가 살짝 수정을 한 코드입니다.
foler안에는 index.html과 index.js 상태입니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="c"></canvas>
<script type="module" src="./index.js"></script>
</body>
</html>index.js
import * as THREE from './node_modules/three/build/three.module.js';
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
renderer.setSize(window.innerWidth, window.innerHeight); // 크기 설정
const fov = 75;
const aspect = window.innerWidth / window.innerHeight; // 화면 비율
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 2;
const scene = new THREE.Scene();
const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function render() {
renderer.render(scene, camera);
}
render();
이렇게 작성하고 실행하면 그냥 딱지같은게 생길겁니다. 사실 이건 1x1x1의 정육면체입니다. 조금 더 3D처럼 보이게 하기 위해서 애니메이션을 추가해보겠습니다. Mesh로 만든 객체에 rotate를 해주면 됩니다.
function animate() {
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
끝으로
이번에는 여기까지 알아보고 다음 글부터는 기본 도형들에 대한 재미있는 예제를 들고 오겠습니다. 고생하셨어요.
출처:https://threejs.org/manual/#ko/fundamentals
공식 문서의 자료들과 examples들을 사용했습니다.
