Three.js 绘制动态模型

原创已于 2023-09-15 16:52:10 修改 · 497 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #three.js

于 2023-09-13 16:27:32 首次发布

Three.js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Three.js中如何使用BufferGeometry提高渲染性能，通过MeshBasicMaterial创建材质，以及如何添加顶点、UV和索引来动态绘制模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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