解析Three.js中几何体是如何构建的--BufferGeometry（四）

℡52Hz★

已于 2025-01-17 10:20:22 修改

阅读量1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： Three.js 文章标签： javascript 开发语言 ecmascript vue 前端

于 2025-01-17 09:38:17 首次发布

本文链接：https://blog.csdn.net/qq_53541336/article/details/145186358

Three.js 专栏收录该内容

6 篇文章

订阅专栏

我们在场景中如果创建一个几何体通常都是使用BoxGeometry，而BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。本篇文章中我们主要阐述BufferGeometry这个属性值，以及使用该属性构建一个三角形。在了解本文之前前，请先查看：Three.js+Vue3+Vite创建第一个场景（一），因为以下所述内容都是在此基础上才可完成。

一、BufferGeometry属性概述

BufferGeometry 是高效表述面片、线或点几何体的数据结构，包含顶点位置、面片索引、法线、颜色、UV 坐标及自定义属性，能显著降低向 GPU 传输数据的开销。言简意赅就是BufferGeometry是面片、线或点几何体的有效表述

二、BufferGeometry应用

下面我们以创建三角形为例，来了解BufferGeometry是如何使用的

1.创建三角形

//创建三角形
const geometry = new THREE.BufferGeometry()

2.设置定点数

定点数是32位浮点数组，定点顺序逆时针为正面，此数据为三角形的顶点数据

//设置定点数据
const vertives = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0])

3.设置定点位置属性

BufferAttribute这个类用于存储与BufferGeometry相关联的 attribute（例如顶点位置向量，面片索引，法向量，颜色值，UV坐标以及任何自定义 attribute ）

geometry.setAttribute('position', new THREE.BufferAttribute(vertives, 3))

4.创建材质

side:THREE.DoubleSide为双面模式

//创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.DoubleSide })

5.创建立方体

//创建立方体
  const cube = new THREE.Mesh(geometry, material)
//添加到场景中
  scene.add(cube)

添加完上述代码后，就可以在界面中看到三角形了

如果是想要绘制四边形，其实我们不难发现四边形是由两个三角形组成的，所以我们只需要在设置定点数据这里，增加定点数即可，其余的依旧不变

6.绘制四边形

//四边形
  const vertives = new Float32Array([
    -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0, -1.0, -1.0, 0.0
  ])

7.使用索引绘制

上述绘制四边形的我们还可以换另一种方式进行绘制，即使用索引值来绘制，索引数组中每三个元素表示一个三角形，索引从0开始

//使用索引绘制
  const vertives = new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0])

8.设置索引

添加完上述代码后，还需要再设置索引，0,1,2,2,3,0表示第一个三角形的三个顶点索引为0,1,2，第二个三角形的三个顶点索引为2,3,0

const indices = new Uint32Array([0, 1, 2, 2, 3, 0])

9.设置索引属性

//设置索引属性
  geometry.setIndex(new THREE.BufferAttribute(indices, 1))

三、几何体划分定点组设置不同材质

一个几何体可能包含多个面，如果想改变每个面的材质这个该如何实现呢，下面我们先从一个面来改变，还是应用上述使用索引绘制的四边形为例来展开，只需要添加以下代码即可

1.设置两个定点组

设置两个定点组来形成两个材质,第一个组中的0,3,0表示第一个材质的起始索引为0，长度为3，材质索引为0，第二个组中的3,3,1表示第二个材质的起始索引为3，长度为3，材质索引为1

geometry.addGroup(0, 3, 0)
geometry.addGroup(3, 3, 1)

2.创建另一个材质

第一个材质看上述代码

//创建另一个材质
  const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 })

3.设置材质组

前面我们在设置材质时只添加了一个材质，现在需要两个，所以这里需要添加材质组才可以

//设置材质数组
  const cube = new THREE.Mesh(geometry, [material, material1])

4.创建几何体

以上方法中我们了解到了如何给一个面添加不同材质，那同样如果是几何体也是一样的

// 创建几何体--BoxGeometry是立方体的几何体
  const geometry = new THREE.BoxGeometry(5, 5, 5)

5.创建六个面材质

// 创建材质--六个面，每个面有自己的颜色
  const cubeMaterial1 = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
  const cubeMaterial2 = new THREE.MeshBasicMaterial({ color: 0xff0000 })
  const cubeMaterial3 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
  const cubeMaterial4 = new THREE.MeshBasicMaterial({ color: 0xffff00 })
  const cubeMaterial5 = new THREE.MeshBasicMaterial({ color: 0xff00ff })
  const cubeMaterial6 = new THREE.MeshBasicMaterial({ color: 0x00ffff })

6.创建材质组

// 创建材质数组
  const cube = new THREE.Mesh(geometry, [
    cubeMaterial1,
    cubeMaterial2,
    cubeMaterial3,
    cubeMaterial4,
    cubeMaterial5,
    cubeMaterial6
  ])