话不多说,先摆下今天要讲的这个ThreeJS的主题目录,主要从三个方面来介绍:
它是谁?能做什么?具体怎么用?(哲学思考?oh,on 我们不玩这么玄!)
首先什么是three.js呢?还是来度娘一下,这样下的定义更加稳、准、狠!不要怂,抄搬上来!
- three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中, Three.js是国内文资料最多、使用最广泛的三维引擎。
- hree.js是基于原生WebGL API和着色器封装得到的3D引擎,也就是一个js库。通过原生WebGL直接编写程序,会比较麻烦,一般开发项目直接使用Three.js引擎。
- 可以让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下,也能够轻松进行web 3D开发,降低了门槛,同时大大提升了效率。
- 简单的项目一般也用不到底层WebGL知识,不过学习WebGL有助于深入理解Three.js 。
使用场景:three.js可以做些什么呢?
通过上面这5个模块分段来进行帮助大家进行理解!
那何为场景?说的这么抽象,应该如何理解呢?
官方权威的解释是:场景就是允许你在什么地方、摆放什么东西来交给three.js来渲染,这是你放置物体、灯光和摄像机的地方。他是一个Object3D对象。
通俗简单的来说就是后续所有的渲染内容都是依托并存放在场景对象中,然后进行渲染。
码猿不服,贴出代码来辩!(语法就不用讲了吧,看不懂的自己去恶补!)
书接上文化:那什么是网格模型呢?
三个顶点确定一个三角形,通过三角形面绘制渲染几何体的所有顶点,通过一系列的三角形拼接出来一个曲面。
下面网格模型的创建分为四个部分:
1,创建一个立方体(圆、方、柱、梯。。。随你便)
2,指定立方体的材质(看你心情来)
3,创建网格模型,指定参数为立方体和材质
4,把网格模型添加到场景中(没有这一步,你就看不到效果,因为场景是载体)
这里我们来拆分一一解说下:
1:创建立方体是three.js的方法,还有其他的一些创建圆、圆柱等立方体的方法。
2:材质的创建和选择,参考官方介绍, 材质分为很多种类
3:创建模型对象是通过new THREE.Mesh()来进行实例化的
该对象把上面两行含有几何体对象和颜色信息的材质对象作为参数,网格模型创建好之后,使用场景对象的.add方法把三维场景的子对象添加到场景中。
码猿继续不服,不贴代码不说话:
再继续掰扯下什么是光源?这个就比较好理解了,犹如黑夜中一道手电筒的光照,它就是光源。。。。,算了,还是用书面文来描述一下!
threejs虚拟光源是对自然界光照的模拟,threejs搭建虚拟场景的时候,为了更好的渲染场景,往往需要设置不同的光源,设置不同的光照强度,就像摄影师给你拍照要设置各种辅助灯光一样。
我们这里用到了“环境光”与“点光源”
环境光:环境光,没有方向全局打亮,不会产生明暗
点光源:参考灯泡来理解
码猿各种不服,贴码来辩:
那什么是相机?和我们现实中的相机一样吗?
就拿人的眼睛来说,在一个空间里可以看向任意方向,可以通过参数调节可视角度和可视距离。相机分为:
- “透视相机”PerspectiveCamera
- “正交相机”OrthographicCamera
一般我们使用符合物理世界近大远小真实情况的透视相机,还有一些特殊情况,远近大小是一样的,那就要用正交相机。
我们这次只讲透视相机:
它有4个参数:
1,fov:视场角(指能看到的角度一般60-90)
2,aspect:视场宽高比(一般用 画布宽/画布 高即可)
3,near:从距离相机多远的位置开始渲染
4,far:距离相机多远的位置截止渲染
码猿反正不服,无码无真相:
最后,什么是渲染器呢?
简单来说就是将“相机( camera )” 在“场景( scene )”里看到的内容渲染/绘制到画布上,然后生成一个canvas,这时我们的第一个demo就完成了,可以打开页面看看了。
直接贴代码,呼住码猿的嘴脸:
再来理一下思路和整体的流程,见下图
通过上面的内容,我们再来梳理一下,大概你了解到了什么呢?
1,是空间坐标的理念?
- x轴正方向向右
- y轴正方向向上
- z轴由屏幕从里向外
2,网格模型的基本理念?
在计算机的世界里,一条弧线是由有限个点构成的有限条线段连接得到的。当线段数量越多,达到你无法察觉这是线段时,一条平滑的弧线就出现了。
计算机的三维模型也是类似的。只不过线段变成了平面,普遍用三角形组成的网格来描述。
随着三角形数量的增加,它的表面将会越来越平滑。
本文暂时没有评论,来添加一个吧(●'◡'●)