ThreeJS 第二篇：顶点概念、几何体结构

一、顶点位置数据解析渲染

👼学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习 Three.js 很有帮助。

(一)、JavaScript 类型化数组

类型化数组

(二)、自定义几何体

😋可以直接调用 BoxGeometry 直接创建一个立方体几何体，调用 SphereGeometry 创建一个球体几何体。
下面代码通过 Threejs 引擎的BufferGeometry和BufferAttribute两个 API 自定义了一个具有六个顶点数据的几何体。

var scene = new THREE.Scene();
var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
var vertices = new Float32Array([
  0,
  0,
  0, //顶点1坐标
  50,
  0,
  0, //顶点2坐标
  0,
  100,
  0, //顶点3坐标
  0,
  0,
  10, //顶点4坐标
  0,
  0,
  100, //顶点5坐标
  50,
  0,
  10, //顶点6坐标
]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;
// 三角面(网格)渲染模式
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //三角面颜色
  side: THREE.DoubleSide, //两面可见
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//点光源
scene.add(mesh); //网格模型添加到场景中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

(三)、点模型 Points

三个点为一组渲染出三角形

// 点渲染模式
var material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 10.0, //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象
scene.add(points); //点对象添加到场景中
1
2
3
4
5
6
7

(四)、线模型 Line

可以把上面的点连接起来

// 线条渲染模式
var material = new THREE.LineBasicMaterial({
  color: 0xff0000, //线条颜色
}); //材质对象
var line = new THREE.Line(geometry, material); //线条模型对象
scene.add(line); //线条对象添加到场景中
1
2
3
4
5
6

(五)、几何体本质

一个立方体网格模型，有 6 个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。
矩形顶点线条

        var scene = new THREE.Scene();
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var material = new THREE.PointsMaterial({
            color: 0xff0000,
            size: 10.0 //点对象像素尺寸
        }); //材质对象
        // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        var line = new THREE.Line(geometry, material);//线条模型对象
        scene.add(line);
1
2
3
4
5
6
7
8
9

球顶点线条

        var scene = new THREE.Scene();
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        var material = new THREE.PointsMaterial({
            color: 0xff0000,
            size: 10.0 //点对象像素尺寸
        }); //材质对象
        // var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        var line = new THREE.Line(geometry, material);//线条模型对象
        scene.add(line);
1
2
3
4
5
6
7
8
9

二、顶点颜色数据插值计算

(一)、顶点颜色数据插值计算

这节介绍一下几何体顶点颜色
顶点一有一个坐标数据，那么他就也有对应的顶点颜色数据…以此类推

(二)、每个顶点设置一种颜色

        var scene = new THREE.Scene();
        var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

        //类型数组创建顶点位置position数据
        var vertices = new Float32Array([
            0, 0, 0, //顶点1坐标
            50, 0, 0, //顶点2坐标
            0, 100, 0, //顶点3坐标

            0, 0, 10, //顶点4坐标
            0, 0, 100, //顶点5坐标
            50, 0, 10, //顶点6坐标
        ]);
        // 创建属性缓冲区对象
        var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
        // 设置几何体attributes属性的位置position属性
        geometry.attributes.position = attribue;
        //类型数组创建顶点颜色color数据
        var colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 1, 0, //顶点2颜色
            0, 0, 1, //顶点3颜色

            1, 1, 0, //顶点4颜色
            0, 1, 1, //顶点5颜色
            1, 0, 1, //顶点6颜色
        ]);
        // 设置几何体attributes属性的颜色color属性
        geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
        //材质对象
        var material = new THREE.PointsMaterial({
            // 使用顶点颜色数据渲染模型，不需要再定义color属性
            // color: 0xff0000,
            vertexColors: THREE.VertexColors, //以顶点颜色为准
            size: 10.0 //点对象像素尺寸
        });
        // 点渲染模式  点模型对象Points
        var points = new THREE.Points(geometry, material); //点模型对象
        scene.add(points); //点对象添加到场景
        var axisHelper = new THREE.AxisHelper(250);
        scene.add(axisHelper);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

---

(三)、材质属性.vertexColors

通过材质的颜色属性 color 设置模型颜色，而本案例并没有这样设置，而是设置了材质属性.vertexColors。

var material = new THREE.PointsMaterial({
  // 使用顶点颜色数据渲染模型，不需要再定义color属性
  // color: 0xff0000,
  vertexColors: THREE.VertexColors, //以顶点颜色为准
  size: 10.0 //点对象像素尺寸
});
1
2
3
4
5
6

关于材质的属性.vertexColors 可以查看Material 文档 介绍，属性.vertexColors 的默认值是 THREE.NoColors，这也就是说模型的颜色渲染效果取决于材质属性.color，如果把材质属性.vertexColors 的值设置为 THREE.VertexColors,threejs 渲染模型的时候就会使用几何体的顶点颜色数据 geometry.attributes.color。

(四)、颜色插值

        var scene = new THREE.Scene();
        var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象
        //类型数组创建顶点位置position数据
        var vertices = new Float32Array([
            0, 0, 0, //顶点1坐标
            50, 0, 0, //顶点2坐标
            0, 100, 0, //顶点3坐标

            0, 0, 10, //顶点4坐标
            0, 0, 100, //顶点5坐标
            50, 0, 10, //顶点6坐标
        ]);
        // 创建属性缓冲区对象
        var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
        // 设置几何体attributes属性的位置position属性
        geometry.attributes.position = attribue;
        //类型数组创建顶点颜色color数据
        var colors = new Float32Array([
            1, 0, 0, //顶点1颜色
            0, 1, 0, //顶点2颜色
            0, 0, 1, //顶点3颜色

            1, 1, 0, //顶点4颜色
            0, 1, 1, //顶点5颜色
            1, 0, 1, //顶点6颜色
        ]);
        // 设置几何体attributes属性的颜色color属性
        geometry.attributes.color = new THREE.BufferAttribute(colors, 3); 
        //材质对象
        var material = new THREE.PointsMaterial({
            vertexColors: THREE.VertexColors,
            size: 10.0 //点对象像素尺寸
        });
        // 点渲染模式  点模型对象Points
        var line = new THREE.Line(geometry, material);//线条模型对象
        scene.add(line);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

之所以出现渐变是因为Threejs通过底层WebGL进行渲染的时候会对顶点的颜色数据进行插值计算。颜色插值计算简单点说，比如一条直线的端点1设置为红色，端点2设置为蓝色，整条直线就会呈现出从点1到红色点2的蓝色颜色渐变，对于网格模型Mesh而言，就是三角形的三个顶点分别设置一个颜色，三角形内部的区域像素会根据三个顶点的颜色进行插值计算。