第七节——顶点概念、几何体结构

ChenZehong 发布于

自定义几何体

可以直接使用BoxGeometry直接创建一个立方体几何体，调用SphereGeometry创建一个球体几何体。

下面代码通过Three.js引擎的BufferGeometry和BufferAttribute两个API自定义一个具有六个顶点数据的几何体：

1
2
3
4
5
6
7
8
9
10
11
12
13
var geometry = new THREE.BufferGeometry() //创建一个buffer类型几何体对象
var vertices = new Float32Array([
    0,0,0,
    50,0,0,
    0,100,0,
    0,0,10,
    0,0,100,
    50,0,10
])
//创建属性缓冲区对象
var attribute = new THREE.BufferAttribute(vartices, 3) //3个作为一组，表示一个顶点的xyz坐标
//设置几何体attibute属性的位置属性
geometry.attributes.position = attribute

通过自定义的几何体创建一个网络模型，对于网络模型而言，几何体所有顶点每三个顶点作为一组可以确定一个三角形，几何体是六个顶点，也就是说可以绘制三个三角形。

1
2
3
4
5
6
7
//三角面（网格）渲染模式
//材质对象
var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //三角面颜色
    side: THREE.DoublesSide //两面可见
})
car mesh = new THREE.Mesh(geometry, material) //网络模型对象

点模型points

为了更好的理解几何体是由顶点构成的，可以把几何体geometry作为点模型Points而不是网格模型Mesh的参数，你会发现上面的六个点坐标会渲染为六个方形的点区域，可以用下面代码代替上面的网格模型部分代码测试效果。

对于网格模型Mesh而言，几何体geometry三个顶点为一组渲染出来一个三角形，对于点模型Points而言，几何体的每个顶点对应位置都会渲染出来一个方形的点区域，该区域可以设置大小。

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

线模型Line

上面两个案例适用点模型和网格模型去渲染几何体的顶点数据，下面代码是把几何体作为线模型Line参数，你会发现渲染效果是从第一个点开始到最后一个点，依次连成线。

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

几何体本质

查看下面一段代码，你可以看出来立方体网格模型Mesh是由立方体几何体geometry和材质material两部分构成，立方体几何体BoxGeometry本质上就是一系列的顶点构成，只是Threejs的APIBoxGeometry把顶点的生成细节封装了，用户可以直接使用。比如一个立方体网格模型，有6个面，每个面至少两个三角形拼成一个矩形平面，每个三角形三个顶点构成，对于球体网格模型而言，同样是通过三角形拼出来一个球面，三角形数量越多，网格模型表面越接近于球形。

顶点颜色数据插值计算

通常几何体顶点位置坐标数据和几何体顶点颜色数据都是一一对应的，比如顶点1有一个顶点位置坐标数据，也有一个顶点颜色数据，顶点2同样也有一个顶点位置坐标数据，也有一个顶点颜色数据…

每个顶点设置一种颜色

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
var geometry = new THREE.BufferGeometry() //声明一个缓冲几何体
//类型数组创建顶点位置position数据
var vertices = new Folat32Array([
  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 attribute = new THREE.BufferAttribute(vertices, 3)
geometry.attributes.position = attribute
//类型数组创建顶点颜色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 mertial = new THREE.PointMaterial({
    color: 0x0000ff,
    vertextColrs: THREE.VertextColors, //以顶点颜色为准
    size: 10.0 //点对象像素尺寸
})
//点渲染模式
var points = new THREE.Points(geometry, material)
scene.add(points)

材质属性vertextColors

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

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

属性缓冲区对象BufferAttribute

Threejs提供的接口BufferAttribute目的是为了创建各种各样顶点数据，比如顶点颜色数据，顶点位置数据，然后作为几何体BufferGeometry的顶点位置坐标属性BufferGeometry.attributes.position、顶点颜色属性BufferGeometry.attributes.color的值。

颜色插值

如果你把几何体作为网格模型Mesh或者线模型Line构造函数的参数，你会发现渲染出渐变的彩色效果。

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

顶点法向量数据光照计算

比如太阳光照在一个物体表面，物体表面与光线夹角位置不同的区域明暗程度不同，WebGL中为了计算光线与物体表面入射角，你首先要计算物体表面每个位置的法线方向，在Threejs中表示物体的网格模型Mesh的曲面是由一个一个三角形构成，所以为了表示物体表面各个位置的法线方向，可以给几何体的每个顶点定义一个方向向量。

下面代码仅仅定义了几何体BufferGeometry的顶点位置数据，没有定义顶点法向量数据。没有法向量数据，点光源、平行光等带有方向性的光源不会起作用，三角形平面整个渲染效果相对暗淡，而且两个三角形分界位置没有棱角感。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var geometry = new THREE.BufferGeometry(); //声明一个空几何体对象
//类型数组创建顶点位置position数据
var vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  50, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标

  0, 0, 0, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 0, //顶点6坐标

]);
// 创建属性缓冲区对象
var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组
// 设置几何体attributes属性的位置position属性
geometry.attributes.position = attribue

定义几何体顶点

在上面顶点位置数据基础上定义顶点法向量数据，这时候除了环境光以外，点光源也会参与光照计算，三角形整个表面比较明亮，同时两个三角形表面法线不同，即使光线方向相同，明暗自然不同，在分界位置有棱角感。

img

1
2
3
4
5
6
7
8
9
10
11
var normals = new Float32Array([
  0, 0, 1, //顶点1法向量
  0, 0, 1, //顶点2法向量
  0, 0, 1, //顶点3法向量

  0, 1, 0, //顶点4法向量
  0, 1, 0, //顶点5法向量
  0, 1, 0, //顶点6法向量
])
//设置几何体attributes属性的位置normal属性
geometry.attributes.normal = new THREE.BufferAttribute(normal, 3)

顶点法向量数据和前面两节课讲解到的顶点位置数据、顶点颜色数据一样都是一一对应的。

ChenZehong

ChenZehong

贵在坚持

86
19
0
CATEGORYS
TAGS