Mesh(Object3D)는 Geometry와 Material로 구성 되어진다.

1. Object3D

Mesh의 상위 클래스로, 지오메트리를 표현하는 방법을 정의한다.

Object3D의 파생 클래스

Object3D
│
└─── Mesh
│
└─── Line
│     │
│     └─── LineSegments
│     │
│     └─── LineLoop
│
└─── Points

Object3D 속성

Object 3D가 장면에 배치되기 위한 속성이다.

X,Y,Z 축에 대한 위치, 회전, 축척값

• Position (Default 0,0,0)
• Rotation (Default 0,0,0)
• Scale (Default 1,1,1)

좌표계

• 위쪽 : Y
• 회전 방향 : 반시계 방향 (+)

2. Geometry

기본 geometry 구성

BufferGeometry의 속성

렌더링 시 GPU에 전달되어 빠르게 형상화 된다. (gpu는 병렬처리가 가능하기 때문)

BufferGeometry

• Position : 형상을 정의하는 3차원 정점 (배열로 이루어짐.)
• Normal : 모델 면에 대한 수직 벡터
• Color : 정점의 색상
• UV : 텍스쳐 맵핑을 위한 UV 좌표
• Vertex Index : 삼각형 면을 구성하기 위한 정점 인덱스

THREE.Math가 에러가 날 땐 THREE.MathUtils 로 바꾸어 사용함.

const geometry = new THREE.BoxGeometry(2, 1, 3, 2, 1, 1); 
// (x, y, z, x seg, y seg, z seg)

const geometry = new THREE.CircleGeometry(
	2, // radius
    13,
    THREE.Math.degToRad(30),
    THREE.Math.degToRad(180)
); 

const geometry = new THREE.ConeGeometry(
	1, // radius
    3, // height
    64, // radial Seg
    4, // height Seg
    true, // openEnded
    THREE.MathUtils.degToRad(90), // theta Start
    THREE.MathUtils.degToRad(270) // theta Length
); 

const geometry = new THREE.CylinderGeometry(
	0.5, // radius top
    2, // radius bottom
    4, // height
    32, // radial Seg
    3, // height Seg
    true, // openEnded
    THREE.MathUtils.degToRad(90 + 45), // theta Start
    THREE.MathUtils.degToRad(45 + 90) // theta Length
);

const geometry = new THREE.SphereGeometry(
	5,
    10,
    64, // 2의 배수로
    THREE.MathUtils.degToRad(0),
    THREE.MathUtils.degToRad(180)
);


const geometry = new THREE.RingGeometry(
	0.1,
    2,
    32,
    3,
    THREE.MathUtils.degToRad(0),
    THREE.MathUtils.degToRad(90)
);

const geometry = new THREE.PlaneGeometry(2, 2, 2, 3);

const geometry = new THREE.TorusGeometry(2, .5, 3, 10);

아래 공식 문서에서 각 geometry를 검색하여 옵션값들을 확인해보자.

https://threejs.org/docs/?q=CircleGeometry#api/en/geometries/CircleGeometry

3. Material

geometry와 함께 모델을 생성하기 위한 필수 요소

기본 material

material의 파생 클래스

MeshBasicMaterial : 단순 음영(Shader)로 그림 (평면, 와이어프레임)
MeshDepthMaterial : 음영으로 깊이를 표현 재질
MeshLambertMaterial : 반사광, 하이라이트가 없는 재질
MeshNormalMaterial : 백터를 RGB 색상으로 매핑하는 재질
MeshPhongMaterial : 픽셀 단위로 광원의 영향을 계산함. 제일 많이 쓰임.

3-1. 다양한 재질: 맵핑

• 이미지나 동영상 데이터를 텍스쳐로 지정 가능.
• 이미지는 2제곱 크기로 지정하는 것이 좋음.

Texture 객체 생성 코드

const textureLoader = new THREE.TextureLoader();
const map = textureLoader.load("../examples/textures/uv_grid_opengl.jpg",
	texture => {
		…
	}
);
const material = new THREE.MeshStandardMaterial({
	…
	map: map
});