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,违者必究。