[Three] 07. Geometry

https://threejs.org/docs/?q=geometry#api/en/core/BufferGeometry

three.js docs

Geometry는 삼각형 polygon으로 구성된 3차원 입체 도형에 대한 객체입니다.

 

Vertex, index, normal, UV 등을 조정할 수 있습니다.

 

Geometry는 공통적으로 BufferGeometry( ) 객체를 상속받아 여러가지 객체로 정의됩니다.

 

BufferGeomerty는 특정한 도형을 지정한 객체가 아니기 때문에, 이를 직접 사용할 때는 도형의 vertex 지점들을 직접 입력해 주어야 합니다. 특히, 삼각형이 최소 단위이기 때문에 그 이상의 다각형을 모두 삼각형으로 나누어 주어야 합니다.

const geometry = new THREE.BufferGeometry();

// z=1 평면에 있는 길이 2인 정사각형
// 정 사각형을 두 개의 직각 삼각형으로 나누어 표시해야 합니다
const vertices = new Float32Array( [
	-1.0, -1.0,  1.0, // v0
	 1.0, -1.0,  1.0, // v1
	 1.0,  1.0,  1.0, // v2

	 1.0,  1.0,  1.0, // v3
	-1.0,  1.0,  1.0, // v4
	-1.0, -1.0,  1.0  // v5
] );

// 한 vertex에 필요한 값이 세 개(x, y, z)이므로, itemSize = 3
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );

아래는 BufferGeometry( )를 상속한 geometry 객체들입니다.

BoxGeometry

const geometry = new THREE.BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );

매개변수	기능	입력값	기본값
width	너비 (수평방향)	float	1
height	높이 (수평방향)	float	1
depth	깊이 (수직방향)	float	1
widthSegments	너비 분할 수	int	1
heightSegments	높이 분할 수	int	1
depthSegments	깊이 분할 수	int	1

CapsuleGeometry

const geometry = new THREE.CapsuleGeometry( radius, height, capSegments, radialSegments, heightSegments );

매개변수	기능	입력값	기본값
radius	반지름	float	1
height	높이 (구 부분 제외)	float	1
capSegments	구의 수평방향 분할 수	int	4
radialSegments	구의 수직방향 분할 수	int	8
heightSegments	높이 분할 수	int	1

CylinderGeometry

const geometry = new THREE.CylinderGeometry(
    radiusTop, radiusBottom, height, radialSegments,
    heightSegments, openEnded, thetaStart, thetaLength
);

매개변수	기능	입력값	기본값
radiusTop	윗면 반지름	float	1
radiusBottom	밑면 반지름	float	1
height	높이	float	1
radialSegments	옆면 수직 방향 분할 수	int	8
heightSegments	옆면 수평 방향 수	int	1
openEnded	밑면 존재 여부	boolean	false
thetaStart	각도 0도가 시작하는 오프셋	float	0
thetaLength	원(부채꼴)의 각도	float	2π