1.概述
在 Three.js 的世界中,几何体(Geometry)由顶点(vertices),线,面组成,被用来定义物体的「形状」和「大小」。
2.BufferGeometry 对象
顾名思义,BufferGeometry 对象和「缓冲」相关,具体而言,该对象能够将几何体的相关数据(如顶点,UV,法线等)存入 GPU 的缓冲区(即显存),从而极大的提高 GPU 渲染性能与内存使用效率。
let cubeGeometry = new THREE.BufferGeometry();
2.材质Material
材质是什么就不用多说了。这里创建MeshBasicMaterial。
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
//纹理在运行时更新
cubeMaterial.needsUpdate = true
3.绘制mesh
将BufferGeometry和材质使用mesh绘制。
// 根据几何体和材质创建物体
mesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
//运行时更新
mesh.needsUpdate = true;
// 将几何体添加到场景中
scene.add(mesh);
4.添加顶点,UV,索引
从目前来看肯定是看不到模型的。因为缺少了顶点vertices信息。
if (indices instanceof Uint8Array)
{
cubeGeometry.setIndex(new THREE.Uint8BufferAttribute(indices, 1));
}else if (indices instanceof Uint16Array)
{
cubeGeometry.setIndex(new THREE.Uint16BufferAttribute(indices, 1));
}else if (indices instanceof Uint32Array)
{
cubeGeometry.setIndex(new THREE.Uint32BufferAttribute(indices, 1));
}else
{
throw new Error("Unsupported indices size (only 8, 16 and 32 bits are supported)");
}
let attribute = new THREE.Float32BufferAttribute(vertices,3);
attribute.needsUpdate = true;
cubeGeometry.setAttribute("position",attribute);
attribute = new THREE.Float32BufferAttribute(uvs,2);
attribute.needsUpdate = true;
cubeGeometry.setAttribute("uv",attribute);
如上图所示,分别添加了vertices,uv信息,还有三角形索引indices。而输入的三个vertices,uvs,indices皆为array数组,如:
const uvs = new Float32Array([
0, 0,
0.5, 0,
0.5, 0.5,
0, 0.5,
]);
通过不断改变vertices,uvs,indices的值来动态绘制模型。