Three 点、线、网格

Threejs所谓模型，如果你使用过三维软件，就是你三维软件中常说的三维模型，当然了，对于大多数前端程序员而言，不了解计算机图形学的情况下，没有使用过任何三维软件的情况下，并没有三维模型的概念。从Three.js角度来说，Threejs模型对象就是由Threejs几何体Geometry和Threejs材质Material构成，材质主要设置三维模型的颜色等外观样式，几何体主要是通过顶点坐标数据表达三维模型的外形形状。

在后面课程讲解中，所有由几何体和材质构成的Threejs对象类一般都会翻译为模型，比如本章节涉及到的点模型Points、线模型Line和网格模型Mesh概念。如果你稍微了解一点WebGL绘制模式，很容易从底层理解这三种模型对象，如果不了解WebGL也没任何关系，直接打开下面几小节的案例源码，预览一下不同模型的渲染效果，很容易对这些不同模型对象建立一个直观的感性认识。

点、线、网格模型介绍

经过前面几章学习相信你对点模型Points、线模型Line、网格模型Mesh已经有了大致了解，本节课就对点、线、网格模型模型进行简单总结。

点模型Points、线模型Line、网格网格模型Mesh都是由几何体Geometry和材质Material构成，这三种模型的区别在于对几何体顶点数据的渲染方式不同，如果有一定WebGL基础，就更容易理解这一点了。

点模型Points

点模型Points就是几何体的每一个顶点数据渲染为一个方形区域，方形区域的大小可以设置。

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 点渲染模式
var material = new THREE.PointsMaterial({
  color: 0xff0000,
  size: 5.0 //点对象像素尺寸
}); //材质对象
var points = new THREE.Points(geometry, material); //点模型对象

线模型Line

两点确定一条直线，线模型Line就是使用线条去连接几何体的顶点数据。

线模型除了Line还有LineLoop和LineSegments,LineLoop和Line区别是连线的时候会闭合把第一个顶点和最后一个顶点连接起来，LineSegments则是顶点不共享，第1、2点确定一条线，第3、4顶点确定一条直线，第2和3点之间不连接。

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 线条渲染模式
var material=new THREE.LineBasicMaterial({
    color:0xff0000 //线条颜色
});//材质对象
// 创建线模型对象   构造函数：Line、LineLoop、LineSegments
var line=new THREE.Line(geometry,material);//线条模型对象

网格模型Mesh

三个顶点确定一个三角形，网格模型Mesh默认的情况下，通过三角形面绘制渲染几何体的所有顶点，通过一系列的三角形拼接出来一个曲面。

var geometry = new THREE.BoxGeometry(100, 100, 100);
// 三角形面渲染模式  
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff, //三角面颜色
}); //材质对象
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

如果设置网格模型的wireframe属性为true，所有三角形会以线条形式绘制出来。开发的时候可以通过设置wireframe属性来查看网格模型的三角形分布特点。

var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff, //三角面颜色
  wireframe:true,//网格模型以线条的模式渲染
});

或者：

// 通过访问属性的形式设置
material.wireframe = true;

点模型Points、线模型Line、网格网格模型Mesh等模型对象的基类都是Object3D，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档Object3D对相关属性和方法的介绍。

缩放

网格模型Mesh的属性.scale表示模型对象的缩放比例，默认值是THREE.Vector3(1.0,1.0,1.0),.scale的属性值是一个三维向量对象Vector3，查看three.js文档你可以知道Vector3对象具有属性.x、.y、.z，Vector3对象还具有方法.set()，.set方法有三个表示xyz方向缩放比例的参数。

网格模型xyz方向分别缩放0.5,1.5,2倍

mesh.scale.set(0.5, 1.5, 2)

x轴方向放大2倍

mesh.scale.x = 2.0;

位置属性.position

模型位置.position属性和.scale属性的属性值一样也是三维向量对象Vector3，通过模型位置属性.position可以设置模型在场景Scene中的位置。模型位置.position的默认值是THREE.Vector3(0.0,0.0,0.0)。

设置网格模型y坐标：

mesh.position.y = 80;

设置模型xyz坐标：

mesh.position.set(80,2,10);

平移

网格模型沿着x轴正方向平移100，可以多次执行该语句，每次执行都是相对上一次的位置进行平移变换。

// 等价于mesh.position = mesh.position + 100;
mesh.translateX(100);//沿着x轴正方向平移距离100

沿着Z轴负方向平移距离50：

mesh.translateZ(-50);

沿着自定义的方向移动：

//向量Vector3对象表示方向
var axis = new THREE.Vector3(1, 1, 1);
axis.normalize(); //向量归一化
//沿着axis轴表示方向平移100
mesh.translateOnAxis(axis, 100);

执行.translateX()、.translateY()、.translateOnAxis()等方法本质上改变的都是模型的位置属性.position。

旋转

立方体网格模型绕立方体的x轴旋转π/4，可以多次执行该语句，每次执行都是相对上一次的角度进行旋转变化：

mesh.rotateX(Math.PI/4);//绕x轴旋转π/4

网格模型绕(0,1,0)向量表示的轴旋转π/8：

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.rotateOnAxis(axis,Math.PI/8);//绕axis轴旋转π/8

执行旋转.rotateX()等方法和执行平移.translateY()等方法一样都是对模型状态属性的改变，区别在于执行平移方法改变的是模型的位置属性.position，执行模型的旋转方法改变的是表示模型角度状态的角度属性.rotation或者四元数属性.quaternion。

模型的角度属性.rotation和四元数属性.quaternion都是表示模型的角度状态，只是表示方法不同，.rotation属性值是欧拉对象Euler,.quaternion属性值是是四元数对象Quaternion：

// 绕着Y轴旋转90度
mesh.rotateY(Math.PI / 2);
//控制台查看：旋转方法，改变了rotation属性
console.log(mesh.rotation);

对象克隆.clone()和复制.copy()

Threejs大多数对象都有克隆.clone()和复制.copy()两个方法,点模型Points、线模型Line、网格网格模型Mesh一样具有这两个方法。

复制方法.copy()

A.copy(B)表示B属性的值赋值给A对应属性。

var p1 = new THREE.Vector3(1.2,2.6,3.2);
var p2 = new THREE.Vector3(0.0,0.0,0.0);
p2.copy(p1)
// p2向量的xyz变为p1的xyz值
console.log(p2);

克隆方法.clone()

N = M.clone()表示返回一个和M相同的对象赋值给N。

var p1 = new THREE.Vector3(1.2,2.6,3.2);
var p2 = p1.clone();
// p2对象和p1对象xyz属性相同
console.log(p2);

网格模型复制和克隆

网格模型复制克隆和三维向量基本逻辑是相同，但是注意三维向量Vector3的.x、.y、.z属性值是数字，也就是说是基本类型的数据，对于网格模型而言，网格模型对象的几何体属性mesh.geometry和材质属性mesh.material的属性值都是对象的索引值。

var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象
 
var mesh=new THREE.Mesh(box,material);//网格模型对象
var mesh2 = mesh.clone();//克隆网格模型
mesh.translateX(20);//网格模型mesh平移
 
scene.add(mesh,mesh2);//网格模型添加到场景中

缩放几何体box,你可以发现上面代码中的两个网格模型的大小都发生了变化，因为网格模型克隆的时候，mesh对象的几何体对象mesh.geometry属性值是box对象的索引值，返回的新对象mesh2几何体属性mesh.geometry的值同样是box对象的索引值。

box.scale(1.5,1.5,1.5);//几何体缩放

在线运行案例

注意

通过本节课的学习，对Threejs不同对象的克隆.clone()和复制.copy()方法有一个大致印象即可。

实际开发的时候，注意不同对象的复制或克隆方法可能稍有区别，使用的时候最好通过代码测试，或者直接查看threejs源码某个类对.clone()和.copy()封装，这样更为直观清楚。

几何体复制和克隆

几何体克隆或复制和网格模型在属性值深拷贝、浅拷贝方面有些不同，比如几何体的顶点属性Geometry.vertices，Geometry.vertices的属性值是一个数组对象，但是复制或克隆的时候，不是获得对象的索引值，而是深拷贝属性的值，可以在threejs源码Geometry.js全文检索copy: function关键词，找到该类对copy方法的封装细节。

转载本站内容时，请务必注明来自W3xue，违者必究。