作为一个前端小白，突然接触three.js&webgl除了懵逼还是懵逼，不过作为一个技术人对于挑战也许就是软件开发中真正的乐趣，至少不会埋头调试一遍又一遍重复的页面数据，上上下下左左右右BABA......简直枯燥到极点。不过three.js&webgl不得不说给我打开了新的世界，接下来我就简单讲述一下我的学习之旅。
Three.js 是一款运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象,three.js内部也是webgl的封装，封装了大量了webgl API ，让比较繁琐的webgl更加简便。
WebGL（全写Web Graphics Library）是一种3D绘图协议，它让可以让开发进一步去了解图形渲染，Webgl是JavaScript和OpenGL ES 2.0合并出来的升级版，通过webgl可以让前端开发者们脱离开css渲染，可以了解更加底层的渲染，WebGL也可以为HTML5 Canvas提供硬件3D加速渲染，webgl是通过系统显卡来在浏览器里更流畅地展示3D场景和模型，加入shader(着色器)来对图形渲染，学习webgl需要具备相应的图形学算法，属于目前图形渲染开发的高级技术之一。目前webgl也运用在游戏，视频特效，包含untiy3D也是集成webgl。
three.js中主要由摄像机 ，场景 ，渲染器 , 资源加载器，素材组成
webgl中的所有东西都是基于摄像机去展示的，可以利用摄像头的视角形成对3d视图观测视角，比如鱼眼视角，从而就让我们可以在平面图上可以开发出真实场景的3D视图。接下来我们看看怎么用three.js创建一个摄像机：
摄像机有了但是为了让景物可以更好的展现，这时候我们就需要一个展示景物的场景，three.js也为我们封装好了，如下所示可以创建一个场景：
渲染器是webgl的渲染启动开关，他可以调用render方式把场景渲染到摄像机。
three.js加载资源不同我们常见的html一样，直接通过src属性加载，而是通过TextureLoader.load来加载资源。
素材常见的包含网格，灯光等许多元素下面我就举个例子
http://www.sunql.top/webgldemo/index.html
https://github.com/sunql0827/webgldemo.git
https://gitee.com/sunql-hugh/webgldemo.git
通过这次基于three.js的webgl全景图开发之旅为我对视图渲染打开了一道新的大门，不过webgl的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。
三维建模无非就是通过专业技能加工成立体图形，使之图形成为直观、易懂，容易判读的立体图件。对于开发者来说，选择一个好的3D开发框架，在全景虚拟漫游场景上实现3D动效，ThingJS vs three.js开发性能和资源投入这里拿来比较一下，希望对你有帮助。
1~three.js优势
Three.js是大多数开发者首次接触的WebGL 3D库，Threejs库的出现解决了底层的渲染细节和复杂的数据结构，可以支持如一个房间级别,或一个楼层级别的渲染,或符合特殊要求的大量同类模型的渲染。
2~three.js开发性能
对 WebGL进行了封装,提供了更高层的渲染接口,提供摄影机、视口的控制,提供场景组织方式,能够加载多种文件格式,通过创建材质、贴图并编写 shader来实现物体效果,创建立方体、球等基本元素,提供灯光、阴影、点云等等底层功能。
3~three.js劣势
虽然Three.js底层引擎级别的三维图形库，有很多开源库对它进行扩展，但较为松散，适合做轻量级可视化应用，复杂应用则需要基于此库进行大量封装才行。尤其场景输出层面，需要3 3DSMax、Maya、CAD等专业美术人员,通过建模再做一定的导出工作才能得到需要的模型，团队协作成本高。
4~ThingJS优势
ThingJS主张3D便捷开发，提供无需3D建模知识即可上手的场景搭建工具和无维护成本的场景存储云空间，模型库提供上万个行业模型资源。提供ThingJS场景工具组件,包含园区、城市或者图表搭建,可以让不具备3D知识的普通用户搭建3D场景，一个人可以完成物联网应用的基础开发。
5~ThingJS开发性能
ThingJS可支撑数十栋建筑的园区级应用,可支持从地球到城市、园区、建筑、楼层、房间、最终到物联网设备的渲染性能负载，物联网可视化效果应用优势明显，可创建信息点、线路、管线、区域、热图、粒子、动画等丰富功能，具备灵活的摄影机控制、第一人称行走、寻路导航和视点线路工具可扩展的界面、头顶信息牌、内嵌视频监控等丰富的信息展示方式。
6~开发者角度的体验 （three.js vs ThingJS）
如果是你是初学者，three.js用起来更花费时间，就一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码，ThingJS是更为上层的抽象，不用关心渲染、mesh、光线等复杂概念，更适合项目团队提高开发效率。
全景项目开发。
其实3D全景其实并不一定非要使用webgl，css3同样可以做到，但是考虑到后续要增加模型动画的问题，所以不得不用webgl了。
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGLES2。0结合在一起，通过增加OpenGLES2。0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染。
这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。由于webgl是基于OpenGL和JavaScript技术结合。
而OpenGL与微软DirectX存在着竞争关系，而且微软自身也开发了Silverlight插件，与webgl其实是类似的，所以微软对webgl技术并不支持。
造景师是一款行业领先的虚拟现实制作工具，让您仅需花费2-5分钟即可轻松拼合一幅高质量的360度球形或柱形全景图。
主要用于房产楼盘、旅游景点、宾馆酒店、校园风光等场景的三维虚拟漫游效果的网上展示，让观看者无需亲临现场即可获得360度身临其境的感受。
同时支持鱼眼照片和普通照片的全景拼合，以及全屏模式、批量拼合、自动识别图像信息、全景图像明暗自动融合等功能。
造型师一款制作Flash三维物体的软件。它提供了一种在因特网上逼真展示三维物体的崭新方法。其通过对一个现实物体进行360°环绕拍摄得到的图像进行自动处理，生成360度物体展示模型。
使观看者可以通过网络交互地观看物体。该软件可广泛应用于网站建设、电子商务、汽车、房地产、服装鞋帽、玩具、文物等行业。
