[Three] 06. Mesh

Mesh는 Scene에서 보여지는 물체, 특히 삼각형 polygon으로 이루어진 도형입니다.

 

Mesh를 선언할 때는 geometry와 material 두 가지가 필요합니다.

 

Geometry는 mesh의 모양에 대한 정보입니다. Three.js에서 정의된 여러 가지 geometry 객체를 사용합니다.

 

Material은 mesh의 겉표면에 대한 정보입니다. Material에 따라 빛이 어떻게 반사되는지나 표면의 색상등이 결정됩니다. Three.js에서 정의된 여러 가지 matrial 객체를 사용합니다.

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

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

Shadow

Mesh의 속성값은 아니지만, Object3D 객체의 속성값을 상속하여 사용함으로서 그림자를 표시할 것인지 설정할 수 있습니다.

 

그림자와 관련한 속성값은 두 종류가 있습니다.

 

castShadow는 해당 물체가 빛을 내는 광원인지에 대한 여부입니다. 직접 빛을 내뿜는게 아니더라도, 다른 광원에서 받을 빛을 반사하는 물체라면 광원으로 볼 수 있습니다.

 

receiveShadow는 광원에서 빛을 받아 그림자를 만드는지에 대한 여부입니다.

* * *

 

아래는 기본 Mesh( )에서 상속된 mesh 객체들의 종류입니다.

BatchedMesh

동일한 material에 서로 다른 geometry와 transform을 가지는 다수의 mesh를 한 번에 랜더링할 때 사용합니다.

 import * as THREE from 'three';
 
 const mesh = new THREE.BatchedMesh( maxInstanceCount, maxVertexCount, maxIndexCount, material);

매개변수	기능	입력값	기본값
maxInstanceCount	최대 mesh 개수	number
maxVertexCount	전체 vertex 개수	number
maxIndexCount	전체 index 개수	number
material	material	THREE.Material	THREE.MeshBasicMaterial( )

InstancedMesh

동일한 material과 geometry에 서로 다른 transform을 가지는 다수의 mesh를 한 번에 랜더링할 때 사용합니다.

 import * as THREE from 'three';
 
 const mesh = THREE.InstancedMesh(geometry, material, count);

매개변수	기능	입력값	기본값
geometry	geometry	number
material	material	THREE.Material	THREE.MeshBasicMaterial( )
count	instance 개수	number

SkinnedMesh

애니메이션 구현에 사용되는 skeleton구조를 포함한 mesh입니다.

 import * as THREE from 'three';
 
 const mesh = THREE.SkinnedMesh(geometry, material);

매개변수	기능	입력값	기본값
geometry	geometry	number
material	material	THREE.Material	THREE.MeshBasicMaterial( )