Geometries

정점(vertices)와 면으로 이루어진 요소들
particles은 vertices의 꼭지점을 의미한다.

Built-in Geometry

translate(), rotateX(), normalize() 와 같은 메서드를 사용할 수 있다. 이 메서드는 mesh가 아닌 vertices에 적용되는 것이다.

• BoxGeometry: 상자를 만듭니다.
• PlaneGeometry: 직사각형 평면을 만듭니다.
• CircleGeometry: 원반 또는 원반의 일부(원형 차트와 유사)를 만듭니다.
• ConeGeometry: 원뿔 또는 원뿔의 일부를 만듭니다. 원뿔의 밑면을 열거나 닫을 수 있습니다.
• CylinderGeometry: 원통을 만듭니다. 원통의 양쪽 끝을 열거나 닫을 수 있으며 각 끝의 반지름을 변경할 수 있습니다.
• RingGeometry: 평평한 링 또는 평평한 원의 일부를 만듭니다.
• TorusGeometry: 두께가 있는 링(도넛과 유사) 또는 링의 일부를 만듭니다.
• TorusKnotGeometry: 일종의 매듭 지오메트리를 만듭니다.
• DodecahedronGeometry: 12면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
• OctahedronGeometry: 8면 구체를 만듭니다. 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
• TetrahedronGeometry: 4면 구체를 만듭니다(세부 사항을 늘리지 않으면 구체라고 하기 어렵습니다). 더 둥근 구체를 만들기 위해 세부 사항을 추가할 수 있습니다.
• IcosahedronGeometry: 거의 같은 크기의 삼각형으로 구성된 구체를 만듭니다.
• SphereGeometry: 가장 일반적인 유형의 구체를 만듭니다. 여기서 면은 사각형처럼 보입니다(사각형은 두 개의 삼각형의 조합일 뿐입니다).
• ShapeGeometry: 경로를 기반으로 모양을 만듭니다.
• TubeGeometry: 경로를 따라 튜브를 만듭니다.
• ExtrudeGeometry: 경로를 기반으로 돌출을 만듭니다. 베벨을 추가하고 제어할 수 있습니다.
• LatheGeometry: 꽃병 또는 꽃병의 일부(회전과 유사)를 만듭니다.
• TextGeometry: 3D 텍스트를 만듭니다. typeface json 형식으로 글꼴을 제공해야 합니다.

BoxGeometry

순서대로 여섯가지 파라미터를 갖는다.
먼저 가로, 세로, 높이의 길이.
1. width — 길이(X axis) Optional; defaults to 1.
2. height — 높이(Y axis) Optional; defaults to 1.
3. depth — 깊이(Z axis) Optional; defaults to 1.
그리고 각 면이 몇 개의 세그먼트로 나뉘는지를 보여준다.
4. widthSegments — Optional; defaults to 1.
5. heightSegments — Optional; defaults to 1.
6. depthSegments — Optional; defaults to 1.

/*
 * 6개의 파라미터를 가진다.
 * 가로, 세로, 높이의 길이
 * 그리고 각 면이 몇 개의 세그먼트로 이루어질지다.
 */
const geometry = new THREE.BoxGeometry(1, 1, 1, 1, 2, 3)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Float32Array

• Typed array
• float 타입
• max length = 3

Float32Array를 만드는 두가지 방법이 있다.

const positionArray = new Float32Array(9)

positionArray[0] = 0
positionArray[1] = 0
positionArray[2] = 0

positionArray[3] = 0
positionArray[4] = 1
positionArray[5] = 0

positionArray[6] = 1
positionArray[7] = 0
positionArray[8] = 0

각각 x, y, z 가 위치하는 정점을 의미한다.

const positionArray = new Float32Array([
    0, 0, 0, // 1
    0, 1, 0, // 2
    1, 0, 0, // 3
])

const geometry = new THREE.BufferGeometry()

/* parameter - array: THREE.TypedArray, itemSize: number, normalized?: boolean  */
const positionAttribute = new THREE.BufferAttribute(positionArray, 3)

geometry.setAttribute('position', positionAttribute)

여러 개의 삼각형 도형을 랜덤하게 생성해보자.

// Scene
const scene = new THREE.Scene()
const geometry = new THREE.BufferGeometry()

const count = 5000
const positionsArray = new Float32Array(count * 3 * 3) // 삼각형은 3개의 정점과 각 정점은 3개의 좌표를 가지므로 3을 곱해준다.

for (let i = 0; i < count * 3 * 3; i++) {
	positionsArray[i] = (Math.random() - 0.5) * 4
}

const positionAttribute = new THREE.BufferAttribute(positionsArray, 3) // 3개의 좌표를 가진 버퍼 어트리뷰트를 생성한다.
geometry.setAttribute('position', positionAttribute)