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

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 WebGLRenderer
    linejoin: "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/