WebGL让网页更炫酷成为可能
关注初识Threejs与小编一起学习成长
WebGL是在浏览器中实现三维效果的一套规范，而Three.js是WebGL优秀的开源框架之一，现在越来越多的浏览器全面支持WebGL。
Three.js是什么？顾名思义，Three.js拆分开来就是Three+js = 3D+Javascript。就是可以用Javascript实现3D程序。Three.js掩盖了使用WebGL原生API开发3D程序的复杂度，小编理解为它们的关系就像Jquery和JavaScript，比如Jquery简化了DOM操作，Three.js可以简化WebGL开发复杂的细节。
01
Three.js三大组件
三大组件分别是相机（Camera）、场景（Scene）和渲染器（Renderer），可以理解为真实世界的眼睛、空间、渲染物体，这三个组件是创建3D图形的必备组件。
场景Scene
场景是所有物体的容器，如果要显示一个物体，就需要将物体对象加入场景中。
相机Camera
相机就像人的眼睛一样，人站在不同位置，从不同的角度看都能够看到不同的风景。而Three.js中有多种相机，这里介绍两个常用的相机，分别为正投影相机和透视投影相机，正投影相机（距离该相机越远的物体，被渲染的越小，正所谓近大远小），透视投影相机（所有物体被渲染出来的尺寸都一样，无论远近）。
渲染器Renderer
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。
02
Three.js学习资源
资源列表
|
1 |
https://github.com/mrdoob/three.js |
|
2 |
three.js中文教程： https://www.techbrood.com/threejs/docs/ |
|
3 |
WebGL中文网： http://www.hewebgl.com/ |
03
小编有话
WebGL原生API实现3D程序，学习成本非常高，而且还需要一些数学和图形学的相关知识。对于没有基础的人来说，门槛高，而Three.js降低了门槛，把WebGL进行了封装，对有前端基础的小伙伴来说，用一些精力就可以应用到自己的项目中去，让网站炫酷起来，提高自己在公司的价值、自我的竞争力，快来与小编一起学习成长吧！
初识Threejs，一起学习成长
长按关注 “初识Threejs”
把有用的知识，分享给更多人