[컴퓨터그래픽스] Three.js를 사용해 3D 게임을 만들어보자!

🌏 3D 게임 보러가기

 

https://computer-graphics-yonsei.github.io/TermProject/garden

https://computer-graphics-yonsei.github.io/TermProject/garden

 

프로젝트 레포지토리: https://github.com/computer-graphics-yonsei/TermProject

GitHub - computer-graphics-yonsei/TermProject

 

 

🌏 Three.js

 

Three.js는 웹 브라우저 안에서 고성능 3D 그래픽을 구현할 수 있도록 도와주는 JavaScript 기반의 고수준(high-level) 라이브러리입니다.
WebGL은 저수준 API로, 버텍스 셰이더와 프래그먼트 셰이더를 직접 작성해야 하며, 카메라·조명·모델 관리도 모두 수작업으로 처리해야 합니다.
Three.js는 이러한 복잡한 단계를 고수준의 객체 지향 구조(Scene, Camera, Mesh 등)로 추상화하여 생산성을 비약적으로 높여줍니다.

 

✅ Three.js의 구성 요소

Three.js로 3D 장면(scene)을 구성하려면 일반적으로 다음과 같은 요소들이 필요합니다.

• Scene: 모든 3D 객체들이 들어갈 컨테이너
  • THREE.Scene() 객체를 생성
  • 이 안에 Mesh, Light, Camera 등 모든 객체를 scene.add()를 통해 추가해야 렌더링됨.
• Camera: 장면을 바라보는 시점
  • new THREE.PerspectiveCamera(fov, aspect, near, far)
    • fov: 시야각(Field of View), 일반적으로 50~75도 사이.
    • aspect: 화면 종횡비 (보통 window.innerWidth / window.innerHeight)
    • near: 카메라 앞에서 어느 거리까지 볼 것인지 (near clipping plane)
    • far: 어느 거리까지 그릴 것인지 (far clipping plane)
• Renderer: Scene + Camera 조합을 통해 브라우저에 그려주는 역할 (WebGLRenderer를 주로 사용)
• const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // canvas를 HTML에 추가

✅ Geometry와 Material

• Geometry는 Three.js에서 자주 쓰이는 도형들을 쉽게 만들 수 있게 해주는 도구 클래스
  개발자는 별도로 정점 데이터를 설계할 필요 없이, 이 생성자만 호출하면 곧바로 3D 모델을 씬에 추가할 수 있게 됩니다.

Geometry	설명
CylinderGeometry	원기둥
BoxGeometry	큐브
SphereGeometry	구
IcosahedronGeometry	정12면체
ConvexGeometry	3D 점 배열로 convex shape 생성
LatheGeometry	2D 곡선을 회전시켜 만든 회전체
OctahedronGeometry	정8면체
ParametricGeometry.klein	Klein bottle (수학적 곡면)
TetrahedronGeometry	정4면체
TorusGeometry	도넛 모양
TorusKnotGeometry	매듭 형태의 도넛
- Material은 광원에 어떻게 반응할지를 정의합니다.
- MeshPhongMaterial: ambient + diffuse + specular 모두 포함
- MeshLambertMaterial: ambient + diffuse만 포함

const material = new THREE.MeshPhongMaterial({
  color: 0xffaa00,
  shininess: 100,
});

✅ 조명 시스템

Three.js에서는 여러 광원을 지원합니다.

• AmbientLight: 전체 장면에 고르게 퍼지는 빛
• PointLight: 특정 지점에서 퍼지는 빛
• DirectionalLight: 태양처럼 병렬로 쏘는 빛
• SpotLight: 특정 방향으로 원뿔형으로 퍼지는 빛

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

✅ Scene 그래프와 계층 구조

Three.js의 scene은 실제로 Tree 구조로 되어 있으며, 각 객체(Object3D, Mesh, Light 등)는 서로 parent-child 관계를 가질 수 있습니다.

const group = new THREE.Group();
group.add(mesh1);
group.add(mesh2);
scene.add(group);

이를 통해 계층적인 애니메이션이나 복잡한 모델의 구성도 쉽게 처리할 수 있습니다.

✅ 카메라 종류와 시점 설정

• PerspectiveCamera: 원근감 있는 시야 (3D 게임, VR에 적합)
• OrthographicCamera: 평면적인 시야 (UI, 설계도, CAD에 적합)

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.z = 5;

✅ 렌더링과 애니메이션 루프

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Three.js에서는 requestAnimationFrame()을 사용하여 60FPS 기반의 애니메이션 루프를 만듭니다.

✅ 텍스처와 맵핑

Three.js에서는 다음과 같은 다양한 텍스처 매핑을 지원합니다:

• 기본 텍스처 (diffuse map): 표면 색상
• 범프 맵 (bump map): 높낮이 효과
• 노멀 맵 (normal map): 정밀한 광원 효과
• 환경 맵 (env map): 반사 효과

const texture = new THREE.TextureLoader().load('brick.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

✅ 객체 선택 및 이벤트 처리

Raycaster를 활용하면 마우스 클릭이나 hover 이벤트를 통해 3D 객체와 상호작용할 수 있습니다.

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// 마우스 이벤트 등록 후
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);

✅ 외부 모델 및 애니메이션 로딩

Three.js는 .fbx, .glTF 등의 포맷을 지원하며, FBXLoader, GLTFLoader 등을 통해 외부 모델과 애니메이션을 로드할 수 있습니다.

const loader = new FBXLoader();
loader.load('character.fbx', (object) => {
  scene.add(object);
});

애니메이션은 AnimationMixer를 통해 재생할 수 있습니다.

 

 

 

 

도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟
비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!