BufferGeometry로 Geometry 만들기

https://threejs.org/docs/?q=Buffer#api/en/core/BufferGeometry

three.js docs

BufferGeometry안에 정점에 대한 정보를 담아서 Geometry를 만들 수 있다.

 

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  innerWidth / innerHeight,
  0.1,
  1000
);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BufferGeometry();

// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = new Float32Array([
    -1.0, -1.0,  1.0, // v0
     1.0, -1.0,  1.0, // v1
     1.0,  1.0,  1.0, // v2   삼각형한개

     1.0,  1.0,  1.0, // v3
    -1.0,  1.0,  1.0, // v4
    -1.0, -1.0,  1.0  // v5   또다른 삼각형 1개 
]);

// itemSize = 3 because there are 3 values (components) per vertex
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer.render(scene, camera);

bufferGeometry로 만든 결과

 

만약 vertice 를 3개만 주었다면

const vertices = new Float32Array([
    -1.0, -1.0,  1.0, // v0
     1.0, -1.0,  1.0, // v1
     1.0,  1.0,  1.0, // v2
]);

정점 3개로 만든 geometry

 

 

 

 

 

설명이 좋은 블로그 

 

https://velog.io/@outclassstudio/Three.js-3-Geometry

Three.js (2) Geometry