Three.js - Custom Geometry

BufferGeometry

geometry를 정의하는 클래스.

속성

position: BufferAttribute

geometry를 구성하는 3차원 좌표에 대한 정점(vertex)

const rawPositions = [-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0];
const positions = new Float32Array(rawPositions);
const geometry = new THREE.BufferGeometry();

geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
// 하나의 정점이 3개의 항목(x, y, z)으로 구성된다는 의미.

const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });

const box = new THREE.Mesh(geometry, material);
this._scene.add(box);

normal: BufferAttribute

각 정점에 대한 수직 벡터(법선 벡터)
법선벡터: 광원이 mesh의 표면에 미치는 입사각과 반사각을 계산하여 재질과 함께 표면의 색상을 결정하는데 사용된다.
법선 벡터가 있어야 물체가 표시된다.

geometry.computeVertexNormals();
// 자동으로 모든 정점에 대해 법선 벡터를 지정한다.

// 수동 설정
const rawNormals = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1];
const normals = new Float32Array(rawNormals);

geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));

const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });

const box = new THREE.Mesh(geometry, material);
this._scene.add(box);

color: BufferAttribute

각 정점에 대한 색상
material에서 vertexColors을 true로 지정해주어야 한다.

const rawColors = [1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0];
const colors = new Float32Array(rawColors);

geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  vertexColors: true,
});

uv: BufferAttribute

각 정점에 대한 텍스쳐 맵핑 좌표

const rawUVs = [0, 0, 1, 0, 0, 1, 1, 1];
const uvs = new Float32Array(rawUVs);

geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));

const textureLoader = new THREE.TextureLoader();
const map = textureLoader.load("/images/texture.jpg");

const material = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  vertexColors: true,
  map: map,
});

Vertex Index: setIndex

position 속성으로 지정된 정점에 대한 인덱스 배열로 지정됨.
mesh를 구성하는 면의 최소 단위는 삼각형이고, 이는 3개의 정점으로 구성된다. 이 3개의 정점에 대한 position 속성에서의 정점 인덱스 번호가 vertex index이다.

Vertex index는 삼각형의 면을 정의한다.
삼각형을 구성하는 정점의 배치순서가 반시계방향이어야 한다.
반시계방향인 면이 앞면.
인덱스는 0이 시작값이므로 첫번째 인덱스는 0이다.

geometry.setIndex([0, 1, 2, 2, 1, 3]);