[WebGL] Three.js의 BufferGeometry로 객체 만들기

샘플 코드

// BufferGeometryを生成
var geometry = new THREE.BufferGeometry();

// 平面用の頂点を定義
// d - c
// |   |
// a - b
var vertexPositions = [
    [-1.0, -1.0, 1.0], // a
    [ 1.0, -1.0, 1.0], // b
    [ 1.0,  1.0, 1.0], // c
    [-1.0,  1.0, 1.0]  // d
];

// Typed Arrayで頂点データを保持
var vertices = new Float32Array(vertexPositions.length * 3);
for (var i = 0; i < vertexPositions.length; i++) {
    vertices[i * 3 + 0] = vertexPositions[i][0];
    vertices[i * 3 + 1] = vertexPositions[i][1];
    vertices[i * 3 + 2] = vertexPositions[i][2];
}

// 頂点インデックスを生成
var indices = new Uint16Array([
    0, 1, 2,
    2, 3, 0
]);

// attributesを追加
geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geometry.addAttribute('index',    new THREE.BufferAttribute(indices,  1));

var material = new THREE.MeshLambertMaterial({
    color: 0xff0000
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -10;

scene.add(mesh);