4.three.js网格模型介绍和绘制基础点、线、面

1、计算机中3D世界的组成

在计算机世界里，3D世界是由点组成，两个点能够组成一条直线，三个不在一条直线上的点就能够组成一个三角形面，无数三角形面就能够组成各种形状的物体，如下图：

我们通常把这种网格模型叫做Mesh模型。给物体贴上皮肤，或者专业点就叫做纹理，那么这个物体就活灵活现了。最后无数的物体就组成了我们的3D世界。

2.Three.js中绘制点

在三维空间中的某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。

空间几何中，点可以用一个向量来表示，在Three.js中也是用一个向量来表示的，代码如下所示：

THREE.Vector3 = function ( x, y, z ) {this.x = x || 0;
this.y = y || 0;
this.z = z || 0;};

在Three.js中我们可以这样载入一个点：

//创建一个顶点
let p1 = new THREE.Vector3(10, 0, 0);//创建几何体对象
let geometry = new THREE.Geometry();
// 顶点添加到Geometry的顶点数组vertices中
geometry.vertices.push(p1);
// 创建材质：必须使用对应点的材质，size为点的大小
let  material = new THREE.PointsMaterial( {color: 'red', size:20} );//创建网格模型（line）
let  mesh = new THREE.Points( geometry, material );//加入到scene中scene.add( mesh );

geometry 对象说明：

THREE.Geometry是所有几何体的基类，它有几个重要的属性：
vertices : 数组，保存该几何体下所有顶点（Vector3对象）
colors : 数组，保存该几何体下所有顶点的颜色信息（Color对象）
faces : 数组，保存该几何体下所有面信息（Face3对象）

3.Three.js中绘制线

在Three.js中我们可以这样载入一条线：

 //创建两个顶点let p1 = new THREE.Vector3(10, 0, 0);let p2 = new THREE.Vector3(100, 0, 0);//创建几何体对象
let geometry = new THREE.Geometry();
// 顶点添加到Geometry的顶点数组vertices中
geometry.vertices.push(p1, p2);
// 创建材质：必须使用对应线的材质
let material = new THREE.LineBasicMaterial({color: 0xffff00,linewidth: 100,linecap: "round", //ignored by WebGLRendererlinejoin: "round", //ignored by WebGLRenderer
});//创建网格模型（line）
let mesh = new THREE.Line(geometry, material);
scene.add(mesh);

3.Three.js中绘制面（自定义顶点的面）

在Three.js中我们可以这样载入一个面：

//创建顶点let p0 = new THREE.Vector3(0, 0, 0);let p1 = new THREE.Vector3(100, 0, 0);let p2 = new THREE.Vector3(0, 0, 100);let p3 = new THREE.Vector3(0, 0, 300);//创建几何体对象let geometry = new THREE.Geometry();// 顶点添加到Geometry的顶点数组vertices中geometry.vertices.push(p0,p1,p2, p3);//创建面let face1 = new THREE.Face3(0, 1, 3);//设置这个面的法向量face1.normal = new THREE.Vector3( 0, 0, -1 );//设置各个顶点对应颜色face1.vertexColors = [new THREE.Color(0xFF0000),new THREE.Color(0x00FF00),new THREE.Color(0x0000FF),];geometry.faces.push(face1);//设置网格材质，这里设置为Lambert材质为一种不发光材质let material = new THREE.MeshLambertMaterial({vertexColors : THREE.VertexColors,side: THREE.DoubleSide});//创建网格模型（line）let mesh = new THREE.Mesh(geometry, material);scene.add(mesh); 

视频演示地址：https://www.bilibili.com/video/BV1fBy8YeEDb/