온스토리

updated_at: 2025-02-01 16:05

three.js를 하다보면 위의 용어들이 헷갈리는 경우가 많다.
먼저 결론부터 말하자면 3d에서 사용하는 object라는 것이 three.js에서는 mesh라는 개념에 속한다.
mesh는 geometry와 material을 합한 개념이다.
geometry 는 뼈대를 의미하고 material은 그 뼈대를 둘러싸는 색상이나 질감등을 의미한다.

이전 장에서는 우리는 간단한 cube를 만들었다.

const geometry = new THREE.BoxGeometry( 50, 50, 50 ); // width, height, depth
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ); 
const mesh = new THREE.Mesh( geometry, material );

위의 간단한 예제처럼 geometry는 넓이, 폭, 그리고 깊이가 50, 50, 50인 박스(뼈대)이고
material은 특정색상을 가지게 하여
두개를 합한 것인 바로 mesh인것을 확인 할 수 있다.

mesh (매쉬)

mesh란 쉽게 말해 점, 폴리곤(삼각형), UV를 관리하는 구조체입니다.
컴퓨터 그래픽, 특히 게임 그래픽은 삼각형이 기본이 되는데 이 삼각형 폴리곤 2개를 가지고 사각형을 만든 다음 텍스쳐를 입히는 방식입니다.
폴리곤에 대해서 좀 더 얘기해보자면 mesh의 한 단위를 가리키는 것으로 이것이 많이 사용될수록 3D모델의 디테일이 좋다진다 할 수 있습니다.

const mesh = new THREE.Mesh( geometry, material );

geometry: (optional) an instance of BufferGeometry. Default is a new BufferGeometry.
material: (optional) a single or an array of Material. Default is a new MeshBasicMaterial

const mesh = new THREE.Mesh( geometry, [
  new THREE.MeshLambertMaterial({ map: FrontTexture }), // front
  new THREE.MeshLambertMaterial({ map: BackTexture }), // back
  new THREE.MeshLambertMaterial({ color: 0xffffff }), // top
  new THREE.MeshLambertMaterial({ color: 0xffffff }), // bottom
  new THREE.MeshLambertMaterial({ map: RightSideTexture }), // left
  new THREE.MeshLambertMaterial({ map: LeftSideTexture }) // right
]);