什么是WebGL。WebGL是在浏览器中实现三维效果的一套规范。使用WebGL原生的API来写3D程序是一件非常痛苦的事情,幸好,有很多同行花业余时间写了一些WebGL开源框架,其中three.js就是非常优秀的一个。
什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。
three.js官方定义的三大要素:场景(scene)、相机(camera)、渲染器(render)。我觉得还得加上一个物体(内容)。
场景主要包含Object, 和灯光。Object有很多类别,主要是点,线,网格Mesh。然后Mesh有是由Geometry和Material材质组成的。Geometry是纯网格顶点信息,有Geometry和BufferGeometry两类,这两类下边又有很多子类。Material是材质信息,下边又有一些子类,比如基础材质,PBR材质,和可配置shader的材质。然后可以在场景里添加灯光。灯光主要有点光源,方向光,聚光灯,面光源。其中面光源用到了比较新的算法,但是目前实现的效果应该还有些问题。
相机主要是两大类,透视相机和正交相机。
渲染器主要是基于webgl的WebGLRenderer和非webgl的SVGRenderer。
要在屏幕上展示3D图形,思路大体上都是这样的:
1、构建一个三维空间
Three中称之为场景(Scene)
2、选择一个观察点,并确定观察方向/角度等
Three中称之为相机(Camera)
3、在场景中添加供观察的物体
Three中的物体有很多种,包括Mesh,Line,Points等,它们都继承自Object3D类
4、将观察到的场景渲染到屏幕上的指定区域
Three中使用Renderer完成这一工作
Three.js应用场景
利用Three.JS可以制作出很多酷炫的3D动画,并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互,在页面上增加一些3D动画和3D交互可以产生更好的用户体验。
通过Three.JS可以实现全景视图,这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果,这样用户就可以360度全方位地观察商品了,给用户带来更好的购物体验。另外,使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设,web3D技术还能得到更广泛的应用。