Geometries

three.js 에서는 다양한 내장 Geometries를 제공합니다.  

BoxGeometry (상자)

BoxGeometry는 세 가지 주요 차원(너비, 높이, 깊이)을 기반으로 상자 모양의 기하학객체를 생성하는 데 사용됩니다.  인자없이 생성하면 기본값의 정육면체가 만들어지죠. 인자는 총 6개이며, 인자 모두 선택사항이고, 기본값 1을 가집니다. BoxGeometry는 BufferGeometry클래스를 기반으로 하고 있습니다.  

1. width : 너비 
2. height 높이 
3. deeps 깊이 
4. widthSegments :너비 세그먼트 수 
5. heightSegments :높이 세그먼트 수
6. depthSegments :깊이 세그먼트 수 

*widthSegments :면의 너비값에 따라 분할된 직사각형 면의 수.

//const boxGeometry = new THREE.BoxGeometry()  인자를 안넣으면 기본값 1:1:1 정육면체가 만들어진다.
const boxGeometry = new THREE.BoxGeometry(1,2,3,4,5,6)
// 인자 순서대로 너비, 높이 , 깊이, 상자 지오메트리의 너비, 높이 및 깊이의 세그먼트 수를 지정

const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})
const cube = new THREE.Mesh(boxGeometry, material)
scene.add(cube)
//생략

상자 지오메트리의 너비, 높이 및 깊이의 세그먼트 수를 지정

기하학의 모양을 구성하는 점을 이러한 방식으로 저장된다.

BoxGeometry 코드를 까보면 BufferGeometry를 기반으로 하고 있음을 알 수 있습니다.

SphereGeometry (구)

SphereGeometry는 구 형태의 기하학 객체를 생성하는 클래스입니다. 

const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);

• radius: 구의 반지름. (기본값 :1)
• widthSegments: 구의 가로(segment) 세그먼트 수. (최소값: 3, 기본값:32)
• heightSegments: 구의 세로(segment) 세그먼트 수. (최소값: 2, 기본값:  16)
• phiStart: phi 각(수평각)의 시작 각도 (기본값: 0).
• phiLength: phi 각(수평각)의 범위 크기 (기본값: Math.PI * 2).
• thetaStart: theta 각(수직각)의 시작 각도 (기본값: 0).
• thetaLength: theta 각(수직각)의 범위 크기(기본값: Math.PI).

2번째 인자 widthSegments와 3번째 인자 heightSegments

4,5번째 인자 phiStart(수평각의 시작 각도 )와 .phiLength(수평각의 범위 크기 )에 대한 설명gif

6,7번째 인자 thetaStart(수직각의 시작 각도) 와 thetaLength(수직각의 범위 크기)에 대한 설명

IcosahedronGeometry(이코사헤드론)

IcosahedronGeometry는 20개의 삼각형 면을 가지는 고정된 구조의 다면체인 icosahedron(이코사헤드론)을 기하 모델링 클래스입니다. 이 다면체는 12개의 정점을 가지며 각 면은 삼각형으로 구성되어 있습니다.

const geometry = new THREE.IcosahedronGeometry(radius, detail);

• radius: 반지름.
• detail: 정밀도. 0 이상의 정수로 지정. 값이 높아질수록 더 많은 삼각형이 생성되어 부드러운 표면이 됨. (기본값: 0)

이코사헤드론 모양

detail 기본값 0 일때 이코사헤드론

detail 1일때 이코사헤드론

출처

https://sbcode.net/threejs/geometries/#srcclientclientts

Geometries - Three.js Tutorials

https://threejs.org/docs/#api/en/geometries/BoxGeometry