Threejs搭建web3D场景

今天发现之前都没有写一个关于搭建web端3D场景的介绍，这节补上： ​ 了解ThreeJs之前先了解WebGL：

（如果你已经了解了threeJs可以跳过这一章）

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

ThreeJs实际上是WebGL的框架，Three.js是在WebGL的api接口基础上，又进行的一层封装。相当于js和JQuery的关系，学习webgl需要图形学知识，而webgl需要通过js和glsl两种语言。如果我们不通过threejs使用webgl势必逃不过底层知识:你必须全面了解着色器语法和自己编写顶点着色片元着色；而有了Three.js就可以大大减少了3d开发所需的专业知识储备。

先看看Three有哪些特点： 面向对象：开发者可以使用的JavaScript对象，而不是仅仅调用JavaScript函数。原本从事后台java等面向对开发语言的开发者学习起来比较容易 功能非常丰富：Three.js除了封装了WebGL原始API之外，Three.js还包含了许多实用的内置对象，并内置了常用着色器。 速度很快：Three.js采用了3D图形最佳实践来保证在不失可用性的前提下，保持极高的性能。 支持交互：WebGL本身并不提供拾取（picking)功能（即是否知道鼠标正处于某个物体上）。而Three.js则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。（鼠标点击发送向内的射线统计穿过的对象来实现交互） 包含数学库：Three.js拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。 内置文件格式支持：你可以使用流行的3D建模软件导出fbx格式或其他格式的文件，然后使用Three.js加载 支持HTML5 canvas：Three.js不但支持WebGL，而且还支持使用Canvas2D、Css3D和SVG进行渲染。

入门：先下载好threeJs的文件官网地址：Threejs官网，在download中可以下载到three的相关文件和案例，不过是英文的，觉得不方便也有中文版本的：Three中文网中文网

下面开始学习threeJS的内容:

创建3D项目的几个要素：

1.场景：可以理解为创建一个空间用来展示3D模型，

2.相机：可以理解为人的眼睛，展现给相机的图就是屏幕上展示的图，对应的改变相机的位置和角度也会改变屏幕展示的图

3.渲染器：绘制完3D之后，需要渲染器去按照设定的3D模型位置，角度以及光源等信息进行渲染展示

4.光源:就是类似自然界中的光，绘制了3D模型需要加载上光源才能看得见，

5.3D模型，无论是用three手动绘制还是通过加载器加载的3D文件，加到场景中，否则你的3D场景就什么也没有

源码可以参考其他章节提供的。

​