一、学习收获
1、OpenGL、WebGL、Canvas、Three.js四者关系
2、Three.js 三大要素
3、Three.js基本要素
4、Three.js 相关插件的使用
5、使用Three.js展示3D几何体效果
二、主要内容:
1、Three.js前提须知
讲到 Three.js,就需要先说一下 OpenGL 和 WebGL, OpenGL 是一个跨平台的3D/2D的绘图标准(规范),WebGL(Web Graphics Library)是一种3D绘图协议,它允许把JavaScript和OpenGL 结合在一起运用,但使用WebGL原生的API来写3D程序非常的复杂,同时需要相对较多的数学知识,对于前端开发者来说学习成本非常高。
1.1 WebGL
WebGL是一种Javascript的3D图形接口,把JavaScript和OpenGL ES 2.0结合在一起。
1.2 OpenGL
OpenGL是开放式图形标准,跨编程语言、跨平台,Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ,OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集,针对手机、游戏主机等嵌入式设备而设计。
1.3 Canvas
Canvas是HTML5的画布元素,在使用Canvas时,需要用到Canvas的上下文,可以用2D上下文绘制二维的图像,也可以使用3D上下文绘制三维的图像,其中3D上下文就是指WebGL。
2、Three.js是什么?
官网:Javascript 3D library(JavaScript 3D 库)。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,极大地提高了性能,功能也非常强大,用户不需要详细地学习 WebGL,就能轻松创作出三维图形,是前端开发者研发3D绘图的主要工具。微信小游戏跳一跳也是在基于Three.js研发的,Threejs现在是独领风骚。
简言之:Three.js就是能够实现3D效果的JS库
3、OpenGL、WebGL、Canvas、Three.js四者关系
OpenGL:3D绘图标准
WebGL:OpenGL + JavaScript
Canvas:WebGL + Canvas 2D
Three.js:一个基于WebGL封装的库
类似于:
ECMAscript:脚本语言规范
JavaScript:脚本语言
jQuery: 一个基于JavaScript封装的库
简单一句话概括:WebGL和Three.js的关系,相当于JavaScript和jQuery的关系。
4、Three.js应用场景有哪些?
作者:筱竹
链接:https://juejin.cn/post/7020396322062598181
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。