前言

上节学习材质的时候，文章中专门提到过材质要与模型结合使用才能渲染出来，简单来说几何体加材质构成了模型，那么这节我们就来了解下模型对象。

模型

点模型：Points，它是将数据渲染成正方形，材质中的size可以控制方形的大小。
线模型:将顶点数据连接起来形成直线，线模型有三种：
Line:渲染出一条直线，该模型通过webGL中的LINE_STRIP方法。
LineSegments:渲染出线段，效果跟Line基本一样，不同的是底层方法它是用的LINES方法。 LineLoop:渲染出一条环线，也就是尾顶点会与头顶点闭合，用的是LINE_LOOP方法。

const line1 = new THREE.LineSegments(boxGeometry, boxMaterial);
const line2 = new THREE.LineLoop(boxGeometry, boxMaterial);
const line3 = new THREE.Line(boxGeometry, boxMaterial);
line1.position.set(0, 2, 0);
line3.position.set(0, -2, 0);
scene.add(line1, line2, line3);

UUB7PXVL4S2DCL}A5WT{~WH.png

网格模型:Mesh,网格模型本质使用三角形拼接出来的图形，在讲解几何体的小节，也提到过一些圆锥等圆形的边，是由一个个三角面组合的。三个模型都能够进行转换，之前小节介绍过几何体的转换，基本是一样的：
平移：可以用translateX/Y/Z方法进行单个坐标轴平移，也可以直接用position.set(x,y,z)属性进行设置。
旋转：可以用rotateX/Y/Z方法，也可以用rotation.set(x,y,z)设置。
缩放：可以用scale进行缩放，scale.set(x,y,z)。上面例子中我们就用到position属性。

方法

模型有很多方法，有两种方法是以上三种模型共有并且相似的——克隆与复制，下面我们来看下这两种方法：

克隆clone():该方法返回一个对象，该对象拥有与被克隆对象相同属性。

const line1 = new THREE.LineSegments(boxGeometry, boxMaterial);
const line4 = line1.clone()
line1.position.set(0, 2, 0);
scene.add(line1, line4);

ZAULKDC{ZR0IOSA0BNI5)FY.png 从图上可以看出克隆效果为深拷贝。

复制copy():将某个对象属性值赋给要复制对象，用法为：A.copy(B)。

const line1 = new THREE.LineSegments(boxGeometry, boxMaterial);
const line2 = new THREE.LineSegments(boxGeometry, boxMaterial);
line1.position.set(0, 2, 0);
line2.position.copy(line1.position)
scene.add(line1, line2);

QQ图片20230411204824.png 我们将line1的位置属性赋值给line2所以两者重合了。克隆跟复制两者用法不同，具体实现效果也会有所区别，一般来说克隆侧重于整体，复制侧重于局部。

总结

以上就是three模型对象的介绍，看到此我们就能通过几何体材质在页面中画出立体图形了。

three学习（九）——模型

前言

模型

方法

总结