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/