Geometries

빌트인 geometries

모든 geometries는 BufferGeometry 클래스에서 상속받는다
해당 클래스는 translate(...), rotateX(...), normalize() 같은 많은 빌트인 메소드들이 있다

• BoxGeometry : 박스
• PlaneGeometry : 사각형 플레인
• CircleGeometry : 원반(혹인 부분적인 원반) 생성 시 사용, 파이차트 처럼!
• ConeGeometry : 원뿔
• CylinderGeomtry : 실린더
• RingGeometry : 납작한 고리
• TorusGeometry : 둥근 고리
• TorusKnotGeometry : 매듭 모양
• DodecahedronGeometry : 12면체 구
• OctahedronGeomtry : 8면체 구
• TetrahedronGeometry : 4면체 구 (그다지 구 처럼 생기지는 않았다)
• IcosahedronGeometry : 거의 똑같은 사이즈의 삼각형으로 이루어진 구
• SphereGeometry : quads처럼 생긴 구
• ShapeGeometry : path를 기반으로 한 모양
• TubeGeometry: 기다란 튜브
• ExtrudeGeometry
• LatheGeometry
• TextGeometry

Geometries' Parameters

대부분의 geometries는 파라미터가 있고 사용 전에 공식문서를 읽어봐야 한다

예를 들어, BoxGeometry는 6개의 파라미터를 받는다

const geometry = new THREE.BoxGeometry(1, 1, 1, 2, 2, 2)

• width : x축의 사이즈
• height : y축의 사이즈
• depth : z축의 사이즈
• widthSegments : x축을 얼마나 많은 부분으로 쪼갤지
• heightSegments : y축을 얼마나 많은 부분으로 쪼갤지
• depthSegments : z축을 얼마나 많은 부분으로 쪼갤지

- subdivision❓

얼마나 많은 삼각형이 한 면을 구성하는지, 디폴트 값은 1 (= 한 면 당 2 개의 삼각형으로 구성되어 있음)
e.g.) 만약 subdivision을 2로 설정한다면, 한 면 당 8 개의 삼각형으로 채워진다

const material = new THREE.MeshBasicMaterial({ color: 'black', wireframe: true})

wireframe: true로 설정을 바꾸면 subdivision을 눈으로 확인할 수 있다

BufferGeometry

빌트인 Geometry 중에 원하는 것이 없거나 구현하고자 하는 모양이 그다지 어렵지 않다면 BufferGeometry를 이용해서 직접 만들 수도 있다

const geometry = new THREE.BufferGeometry()

위처럼 빈 BuffeGeometry를 초기화 함으로써 시작할 수 있다
BufferGeometry에 vertice를 추가하려면 Float32Array로 시작해야한다.

- Float32Array❓

네이티브 자바스크립트 배열
배열의 길이는 픽스되어있고 float만 저장할 수 있다

const positionsArray = new Float32Array(9)

// First vertice
positionsArray[0] = 0
positionsArray[1] = 0
positionsArray[2] = 0

// Second vertice
positionsArray[3] = 0
positionsArray[4] = 1
positionsArray[5] = 0

// Third vertice
positionsArray[6] = 1
positionsArray[7] = 0
positionsArray[8] = 0

Float32Array를 만드는 순서 첫 번째는 먼저 길이를 지정해주고 나중에 배열을 채워넣거나

const positionsArray = new Float32Array([
    0, 0, 0, // First vertex
    0, 1, 0, // Second vertex
    1, 0, 0  // Third vertex
])

혹은 이렇게 배열로 건네줄 수도 있다

이 어레이를 BufferGeometry로 보내기 전에

// 1st param = 어레이 이름
// 2nd param = 하나의 vertex가 만드는 값의 갯수
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)

// 1st param = 어트리뷰트 이름 (쉐이더 관련)
// 2nd param = 값
geometry.setAttribute('position', positionsAttribute)

BufferAttribute로 변경해준 뒤 setAttribute(...)로 BufferGeometry에 더해준다

- For Loop으로 여러개 삼각형 생성

// Create an empty BufferGeometry
const geometry = new THREE.BufferGeometry()

// Create 50 triangles (450 values)
const count = 50
const positionsArray = new Float32Array(count * 3 * 3)
for(let i = 0; i < count * 3 * 3; i++)
{
    positionsArray[i] = (Math.random() - 0.5) * 4
}

// Create the attribute and name it 'position'
const positionsAttribute = new THREE.BufferAttribute(positionsArray, 3)
geometry.setAttribute('position', positionsAttribute)

count x 3 x 3 을 하는 이유❔
👉 50개의 삼각형이 필요하고 각 삼각형은 3 vertices가 필요하고 또 vertex는 3개의 값(x, y, z)로 구성되어있기때문