WEBGL之three.js实现

上一期讲的是WebGL原理和应用--OpenGL实现3D渲染效果，这一次主要介绍Three.js是如何实现3D渲染效果的（Three代表3D）：

three.js应用

（1）首先是Three.js里面主要的三个要素：场景，相机，渲染器。这也很好理解，就是在一个空间里实现3D效果的三个环节，了解了这个后面就很容易想象出模拟的过程。

（2）接下来是渲染模型所要的几何体和材质，并添加到场景。

（3）场景和模型定义好后，接下来需要一个视角，就是下面的相机视角，观察的角度。

（4）场景和相机都好了下面就是渲染的过程，通过图形重绘实现3D的效果。

three.js用户交互

（1）：实现3D模型的外部操作。

首先要引入script库 :OrbitControls.js和OrbitControls.js，然后实现具体操作。可参考github源码。

（2）：实现3D模型的数据检测的可视化：

先要引入script库 :dat.gui.js和at.gui.js，可参考：dat.gui文档，github源码

three.js模型引入

（1）Object格式模型的引入用THREE.ObjectLoader，同时还有很多格式可参考Three.js文档.

（2）Clara.io网站(导入模型，制作模型，格式转换)：

格式包括： .3d .3dc .3ds .ac .b3d .blend .bmp .bvh .bw .cfg .claraarchive .claramats .csm .dae .dds .dxf .fbx .gdal .geo .gif .hdr .hmp .ifc .iges .igs .int .inta .irr .irrmesh .iv .jpeg .jpg .jsfbx .json .lwo .lws .lxo .markdown .md .md2 .md3 .md5 .mdc .mdl .mtl .ndo .nff .obj .off .osgterrain .pbm .pgm .pic .pk3 .ply .png .pnm .pov .ppm .q3d .q3s .rgb .rgba .sgi .shp .smd .step .stl .stp .terrain .text .tga .tif .tiff .txp .txt .vismat .vismatzip .vrmat .vrmatzip .vrscene .vrscenezip .vta .wrl .wrz .x .xgl .zgl .zip。