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信息。

        //vertices
		const positionAttribute = new THREE.BufferAttribute(vertices, 3);
		cubeGeometry.attributes.position = positionAttribute;
        //uvs
        const uvsAttribute = new THREE.BufferAttribute(uvs,2);
		cubeGeometry.attributes.uvs = uvsAttribute;
		//indices
		const indicesAttribute = new THREE.BufferAttribute(indices,1);
		cubeGeometry.setIndex(indicesAttribute);

如上图所示，分别添加了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的值来动态绘制模型。