Three.js Geometry

Question

立方体 BoxGeometry、圆柱体 CylinderGeometry、球体 SphereGeometry 等 Three.js 几何体类都是基于基类 BufferGeometry 二次封装。

Geometry对原生WebGL中的顶点位置position、顶点法向量normal、顶点颜色color、顶点纹理坐标uv、顶点索引index等顶点数据进行了封装，关于Geometry顶点更多介绍可以关注本站发布的Three.js视频教程，见第二章。如果你是第一次接触到顶点的概念，没有原生WebGL基础，建议学习下原生WebGL教程，这样的话，可以更好的理解几何体顶点的概念。

.vertices 顶点位置属性 Geometry 自定义一个几何体

阅读 src 目录下立方体 BoxGeometry、球体 SphereGeometry、圆柱体 CylinderGeometry 等 three.js 几何体类的源码，你可以发现这些几何体的源码都是生成各类几何体的顶点的相关算法。

一个顶点的位置xyz坐标，可以使用Three.js的一个三维向量Vector3来表示，Three.js几何体对象Geometry的属性.vertices表示顶点位置位置坐标的集合。.vertices的属性值是数组，数组元素是一个个表示顶点位置坐标的三维向量对象Vector3。

var geo = new THREE.Geometry();
//顶点1位置坐标
var points1 = new THREE.Vector3(68, 10, 8);
//顶点2位置坐标
var points2 = new THREE.Vector3(21, 69, 7);
//顶点3位置坐标
var points3 = new THREE.Vector3(91, 89, 12);
//顶点位置坐标添加到geometry对象
geo.vertices.push(points1, points2, points3);
//线材质
var mat = new THREE.LineBasicMaterial({color: 0xffff00});
//线条模型对象
var line = new THREE.Line(geo, mat);

.colors 顶点颜色属性

通过Three.js几何体对象Geometry的属性.colors来设置顶点的颜色，顶点的颜色值可以通过Color对象来定义。一个顶点的颜色数据用一个Color对象来表示，然后作为几何体.colors属性值数组的元素。

注意对于点模型Points和线模型Line几何体的顶点颜色属性.colors中顶点数据才会起作用，如果是网格模型Mesh，颜色需要通过三角面对象Face3来定义。

如果几何体顶点颜色属性.colors中的数据更新，需要通过设置Geometry.colorsNeedUpdate=true告知three.js系统，否则几何体顶点颜色信息的变化不能反映得到WebGL渲染器WebGLRenderer的渲染结果中。

var geo = new THREE.Geometry();
// Vector3向量对象表示顶点位置数据
var points1 = new THREE.Vector3(68, 10, 8);
var points2 = new THREE.Vector3(21, 69, 7);
var points3 = new THREE.Vector3(91, 89, 12);
//顶点坐标添加到geometry对象
geo.vertices.push(points1, points2, points3);
// Color对象表示顶点颜色数据
var color1 = new THREE.Color(0xdfaf05);
var color2 = new THREE.Color(0x03aedf);
var color3 = new THREE.Color(0x0895ff);
//顶点颜色数据添加到geometry对象
geo.colors.push(color1, color2, color3);
//材质对象
var mat = new THREE.LineBasicMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
});
//线条模型对象
var line = new THREE.Line(geo, mat);

.faces三角形属性

.faces属性定义了几何体包含的所有三角形，因为顶点位置属性.vertices中定义了顶点位置坐标，.faces属性中不会再定义顶点位置坐标，只需要通过索引引用.vertices中的顶点数据即可，这样可以实现顶点复用。

var geo= new THREE.Geometry();
// 四个顶点位置的坐标p1、p2、p3、p4
var p1 = new THREE.Vector3(2, 2, 2);
var p2 = new THREE.Vector3(2, 105, 2);
var p3 = new THREE.Vector3(55, 2, 2);
var p4 = new THREE.Vector3(2, 2, 105);
//顶点坐标添加到geometry对象
geo.vertices.push(p1, p2, p3, p4);
// Face3构造函数创建一个三角形
var face1 = new THREE.Face3(0, 1, 2);
//设置三角形face1每个顶点的法向量
var normal1 = new THREE.Vector3(0, 0, -1);
var normal2 = new THREE.Vector3(0, 0, -1);
var normal3 = new THREE.Vector3(0, 0, -1);
// 设置三角形Face3三个顶点的法向量
face1.vertexNormals.push(normal1, normal2, normal3);
// 三角形2
var face2 = new THREE.Face3(0, 2, 3);
// 设置三角形法向量
face2.normal = new THREE.Vector3(0, -1, 0);
//三角形face1、face2添加到几何体中
geo.faces.push(face1, face2);
var mat = new THREE.MeshPhongMaterial({
  color: 0xffff00,
  side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh(geo, mat);

定义一个三角面的颜色

face1.color = new THREE.Color(0xadffae);
face2.color = new THREE.Color(0xadffae);

定义一个三角面三个顶点的颜色

// 设置三角形face1三个顶点的颜色
face1.vertexColors = [
  new THREE.Color(0xdfaf05),
  new THREE.Color(0x03aedf),
  new THREE.Color(0x0895ff),
]
//材质对象
var mat = new THREE.MeshPhongMaterial({
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  side: THREE.DoubleSide,
});

.boundingBox包围盒属性

默认值是null，可以执行几何体的.computeBoundingBox()计算，会得到该几何体.boundingBox的属性值Box3

.boundingSphere包围球属性

默认值是null，可以执行几何体的.computeBoundingSphere()计算，会得到该几何体.boundingSphere的属性值Sphere

居中方法.center()

基于几何体的包围盒进行居中计算。

.computeBoundingBox ()

执行.computeBoundingBox ()方法，计算包围盒属性.boundingBox的属性值。

.applyMatrix(Matrix4)

大家都知道几何体本质上都是顶点数据，顶点数据自然可以进行矩阵变换，比如平移、缩放、旋转等，几何体执行.applyMatrix(Matrix4)方法，可以参数矩阵Matrix4对几何体的顶点坐标进行矩阵变换。

.fromBufferGeometry()

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

var buffer = new THREE.BoxBufferGeometry()
var box = new THREE.Geometry()
box.fromBufferGeometry(buffer)

.translate()

通过该方法可以平移几何体，本质上就是几何体顶点位置坐标xyz平移变化。执行该方法后几何体的顶点坐标就会发生变化，注意与Object3D.position区分，改变模型对象的位置发生了平移，几何体的顶点数据并不会改变，只是改变了模型对象的模型矩阵。

var geometry = new THREE.PlaneGeometry(10,10)
// xyz方向分别平移距离2,3,4
geometry.translate(2,3,4)

.computeFaceNormals()

几何体通过执行该方法计算几何体三角面的法向量Face3.normal

.computeFlatVertexNormals()

计算三角面顶点法向量Face3.vertexNormals. 将每个三角形面的每个顶点的顶点法向量设置为与面的法线相同

.computeVertexNormals(Boolean)

如果方法的参数为true，每个面垂直于顶点法线由面部区域加权。通过平均三角形面的法线来计算顶点法线。

Three.js几何体顶点

Three.js 的两个API几何体 Geometry 和缓冲类型几何体 BufferGeometry 都是对原生WebGL中各种顶点数据的封装，两个不同的几何体API创建的对象可以表示一样的内容，只是数据结构不同，简单点说就是对象的属性不同。

如果想真正理解Three.js几何体中的顶点概念，最好有一点原生WebGL基础，了解下原生WebGL中关于顶点位置、顶点法向量、顶点颜色、顶点索引等概念的介绍。