Three.js BufferGeometry 介绍

Question

缓冲区类型几何体 BufferGeometry 是 Three.js 的核心类之一，立方体BoxBufferGeometry、圆柱体CylinderBufferGeometry、球体SphereBufferGeometry等几何体类的基类都是BufferGeometry。

BufferGeometry对原生WebGL中的顶点位置、顶点纹理坐标UV、顶点颜色、顶点法向量、顶点索引等顶点数据进行了封装，如果你有原生WebGL基础，你看下文档，阅读下Three.js源码其实很容易理解，如果没有原生WebGL基础建立学习下本站的WebGL视频教程，关于BufferGeometry的内容可以本站发布的Three.js视频教程第二章。

BufferGeometry 自定义一个几何体

立方体BoxBufferGeometry、圆柱体CylinderBufferGeometry、球体SphereBufferGeometry等几何体类都包含了特定的生成该几何体形状所有顶点数据的算法，有兴趣可以去阅读相关的源码，这里简单展示下如果通过基类BufferGeometry自定义一个几何体。

//创建一个缓冲类型的几何体对象
var geo = new THREE.BufferGeometry();
//类型数组创建顶点数据  数组中包含6个顶点的xyz坐标数据
var verArr = new Float32Array([
  1, 2, 3,
  49, 2, 4,
  -1, 99, -1,
  1, 1, 9,
  6, 5, 108,
  48, 1, 3,
]);
//三个为一组，表示一个顶点坐标
var BufferAttribute = new THREE.BufferAttribute(verArr, 3);
// 设置几何体的顶点位置数据
geo.attributes.position = BufferAttribute;

上面同样一个几何体，如果你创建不同的模型，可以渲染出来不同的效果，这里之所以说着一点，也是为了让你理解顶点指的是什么。

网格模型：三角形渲染模式，没有顶点索引数据复用顶点的情况下，每个三角形包含三个顶点，上面6个顶点可以渲染两个三角形。

// 三角面(网格)渲染模式
var material = new THREE.MeshPhongMaterial({
  color: 0x1111ff, //三角面颜色
  side: THREE.DoubleSide //两面可见
});
var mesh = new THREE.Mesh(geometry, material);

线模型：线渲染模式，两点确定一条直线

// 线条渲染模式
var material=new THREE.LineBasicMaterial({color:0xff0000});
//线条模型对象
var line=new THREE.Line(geo,material);

点模型：点渲染模式，6个顶点渲染出来6个方形点

var material = new THREE.PointsMaterial({
  color: 0xff1133,
  size: 6.0 //点对象像素尺寸
});
 //点模型对象
var points = new THREE.Points(geo, material);

.attributes 属性

three.js提供的BufferAttribute类用于创建一个表示一组同类顶点数据的对象，可以用BufferAttribute。

几何体的.attributes属性是除了顶点索引数据以外所有顶点数据的集合，比如.attributes.position
表示顶点位置坐标数据，.attributes.uv表示顶点纹理坐标UV数据，.attributes.normal表示顶点法向量数据，所有的类型的顶点数据都是一一对应的。.attributes.position、.attributes.uv、.attributes.normal的属性值都是BufferAttribute对象。

.index 属性

.index属性的值是顶点索引数据构成的BufferAttribute对象，如果你有一定的原生WebGL基础，应该知道顶点索引的功能是复用顶点数据，比如一定矩形有一个顶点，如果不设置顶点索引，需要至少6个顶点才能绘制两个三角形组合出来一个矩形，如果定义顶点索引数据，重合的两个顶点可以复用顶点数据，只需要顶点4个顶点坐标即可。

6个顶点定义一个矩形

//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  10, 10, 10,   //顶点1位置
  90, 10, 10,  //顶点2位置
  90, 90, 10, //顶点3位置
  10, 10, 10,   //顶点4位置   和顶点1位置相同
  90, 90, 10, //顶点5位置  和顶点3位置相同
  10, 90, 10,  //顶点6位置
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue

4个顶点定义一个矩形

var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
  10, 10, 10, //顶点1位置
  90, 10, 10, //顶点2位置
  90, 90, 10, //顶点3位置
  10, 90, 10, //顶点4位置
]);
var attribue = new THREE.BufferAttribute(vertices, 3);
geometry.attributes.position = attribue
// Uint16Array类型数组创建顶点索引数据,如果顶点数量更多可以使用Uint32Array来创建顶点索引数据的类型数组对象
var indexes = new Uint16Array([
  0, 1, 2, 0, 2, 3,
])
// 索引数据赋值给几何体的index属性
geometry.index = new THREE.BufferAttribute(indexes, 1);

.addAttribute() 方法

.addAttribute()方法执行的时候，本质上是改变的.attributes属性，.attributes属性可以直接设置.attributes.position、.attributes.uv等属性，也可以通过.addAttribute()方法设置。

直接设置.attributes.position

geometry.attributes.position = new THREE.BufferAttribute(vertices, 3)

通过.addAttribute()方法设置.attributes.position等顶点属性值

geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));
geometry.addAttribute('normal',new THREE.BufferAttribute(normals,3));
geometry.addAttribute('uv',new THREE.BufferAttribute(uvs,2));

方法 .fromGeometry()

通过.fromGeometry()方法可以把一个几何体Geometry转化为一个缓冲类型几何体BufferGeometry。

var box = new THREE.BoxGeometry()
var BufferBox = new THREE.BufferGeometry()
BufferBox.fromGeometry(box)

Three.js 渲染器解析 BufferGeometry

Three.js渲染器在渲染场景的时候，会从缓冲类型几何体对象BufferGeometry中提取顶点位置、法向量、颜色、索引等数据，然后调用WebGL相关原生API创建顶点缓冲区，这样GUP可以读取顶点数据在顶点着色器中进行逐顶点计算处理。关于WebGL渲染器WebGLRenderer如何解析BufferGeometry对象的，可以查看/src/renderers/webgl目录下的WebGLAttributes.js、WebGLGeometries.js等文件。