作为一个前端小白，突然接触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的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。
panolens.js 是一款很强大的 全景图片查看器，也可播放视频，详情可查看 官网最近在浏览东西时不小心发现 GitHub 上也有 panolens.js 的 文档和demo 。
大概分为两种模式，模块化引用 和 普通html引用，如下图：
本文章主要分享一下 普通html引入 ，举个栗子：
哇哦竟然实现了，小伙伴们赶快试试吧~~~ 记得点赞哦~~~
<div id="div1" style="cursor:handposition:absolutewidth:500height:190overflow:hiddenborder:1 solid red" onmouseover="clearTimeout(scrl)" onmousemove="getpos()" onmouseout="change(1)"><img src=http://www.jb51.net/upload/out500b.jpg onload="change(1)"></div><script>var scrl,direction="right"var x,xold,xdiff, i=1function change(start){ if(direction == "right"){ if(div1.scrollTop+190<div1.scrollHeight){ div1.scrollTop += 190} else{ div1.scrollTop = 0} } else{ if(div1.scrollTop-190 >0){ div1.scrollTop -= 190} else{ div1.scrollTop = div1.scrollHeight} } if(start) scrl = setTimeout("change(1)",100)else clearTimeout(scrl)} function getpos(){ x = event.clientXxdiff = x - xoldxold = xif(xdiff>0) direction = "right"if(xdiff<0) direction = "left"change(0)}</script>如需引入外部Js需刷新才能执行
