3D 기본 요소

 

 

3D 그래픽에서 3D 렌더링 과정의 핵심 구성 요소

 

 

Scene (무대)

 

3D 그래픽의 무대 역할을 하는 공간

 

• 모든 3D 객체(Object), 광원(Light), 카메라(Camera) 등이 Scene에 배치됨
• HTML의 document와 같은 역할

 

Three.js에서의 Scene생성

const scene = new THREE.Scene();

 

 

 

 

 

Camera (카메라)

 

Scene 내의 3D 오브젝트를 어떤 시점에서 볼 것인지 결정

Scene을 촬영하는 '눈'의 역할

 

 

PerspectiveCamera (원근 카메라)

 

실제 사람의 눈처럼 원근감을 적용하여 객체를 보여줌

→ 가까운 물체는 크게, 먼 물체는 작게 보임

new THREE.PerspectiveCamera(fov, aspect, near, far);

 

 

OrthographicCamera (직교 카메라)

원근감 없이 객체를 동일한 크기로 보여줌

→ 건축 도면이나 UI 작업에 유용

new THREE.OrthographicCamera(left, right, top, bottom, near, far);

카메라의 위치, 방향 시야각(Field of View, FoV) 등을 조절해서 원하는 장면을 만들 수 있음

 

 

 

Renderer (렌더러)

 

Scene과 Camera를 바탕으로 최종 이미지 생성

→ 카메라 렌즈를 통해 장면을 출력하는 과정과 비슷함

 

 

Three.js에서는 WebGLRenderer를 사용

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

렌더링 과정에서 빛, 그림자, 재질(Material), 텍스처(Texture) 등을 적용하여 화면에 보여줌

 

 

 

Object (오브젝트)

 

Scene 내에 배치되는 모든 3D 요소

 

 

 

기본적으로 Mesh(메시) 구조로 구성됨

 

 

Mesh = Geometry(형태) + Material(재질)

 

Geometry (기하 구조): 구, 박스, 원기둥 같은 형태를 정의

Material (재질): 색상, 반사, 투명도 등의 표면 속성을 정의

 

 

 

박스 오브젝트 생성 코드

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

Object는 위치(position), 크기(scale), 회전(rotation) 등의 속성을 조절 가능

• 형태 : 정육면체 (큐브)
• 크기 : 1x1x1 (기본 단위)
• 색상 : 빨간색 (0xff0000)
• 재질 : MeshBasicMaterial (기본 재질, 광원 영향 없음)
• 위치 : (0,0,0) (기본 위치)