Three.js 绘制动态模型

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的值来动态绘制模型。