WebGL初探—Three.js全景图实战
作者&投稿：笃和 （若有异议请与网页底部的电邮联系）
作为一个前端小白，突然接触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的厉害之处还有很多很多是我还未涉及到了，以后还需要更加努力了。
查养尼尔： 准确地说应该是哪些浏览器支持WebGL,three.js是封装的WebGL引擎.常见所有浏览器最新版本基本都支持WebGL1.0,也就是说支持three.js引擎,
凌云县17358284072： webgl three.js怎么设置立体图形每个面的颜色 - ？
查养尼尔： 演示实验场景效果 下面的演示将会向你展示使用Three.js库和WebGL渲染出的场景效果.也许它也可以通过WebGL直接实现该效果,但是如果加上Three.js库的帮助,将会使得开发变得更加简单.1. Nucleal Nucleal 是一个搭载Three.js实现的WebGL实验,它能够将图片分解成成千上万的物理颗粒.你可以选择多种图片的颗粒组合效果,包括速度和效果.动画的实现非常平滑自然令人印象深刻.2. Lights 光照效果 Lights 光照效果实现了一个惊人的视觉体验,它由Three.js所驱动,它搭配了多种颜色丰富的形状,这是一道光,它穿过一个充满五颜六色形状的空间,效果非常震撼,建议带上耳机效果会更好.
凌云县17358284072： three.js Hightopo Babylon.js 各有什么优缺点 - ？
查养尼尔： Three.js 是纯渲染引擎,而且代码易读,容易作为学习WebGL、3D图形、3D数学应用的平台,也可以做中小型的重表现的Web项目. 适合做中大型项目,尤其是多种媒体混杂的或者是游戏项目VR体验项目,Three.js要配合更多扩展库完成,因...
凌云县17358284072： three.js 怎么使用stl文件 - ？
查养尼尔： 3D打印是当下和未来10年产品技术主流方向之一,影响深远.对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术.HTML5(WebGL)可以用来构建3D视图、立体动画、人机交互.Three.js是...
凌云县17358284072： webgl、three.js、d3.js这三者是什么关系? - ？
查养尼尔： D3.js是一个数据可视化的库,看看他们的DEMO就可以知道,技术基础是SVG.兼容性是IE9+. webgl是HTML5中提出的新技术,是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,关于它的教程可以看看hiwebgl.目前兼容性堪忧 three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环.它的教程同样可以在hiwebgl里面找到. three.js之于webgl,类似于windows版本的虚幻引擎之于D3D.当然,虚幻引擎的能力范围比three.js大得多.d3.js跟上面两者没有关系.
凌云县17358284072： three.js - ？
查养尼尔： 其实三者是有联系的 canvas是html5新定义的一个标签 webgl要依赖canvas运行 而three.js是webgl的一个库
凌云县17358284072： html5 threejs webgl 双击放大 - ？
查养尼尔： 很难精确控制,除非这一点是正好位于视口中心点,建议先:1,整体移动3D模型,使鼠标双击点位于视口中心2,放大3,执行第一步的相反的操作
凌云县17358284072： three.js 怎么支持ie - ？
查养尼尔： three.js是JavaScript编写的第三方3D引擎库,在IE11以下无法使用.three.js基于HTML5/CSS3标准和WebGL(Web Graphics Library)3D绘图标准,本质上就是一个JS编写的WebGL,不支持这两个标准的浏览器,必然无法支持three.js.目前,支...
凌云县17358284072： threejs怎么把box图形设置透明 - ？
查养尼尔： 可以让渲染器透明, 能够看到html的内容 renderer = new THREE.WebGLRenderer({ alpha:true, antialias: true }); renderer.setClearColor(0xFFFFFF, 0.0); 或者renderer.setClearAlpha(0);
凌云县17358284072： 学习three.js从哪里开始最好 - ？
查养尼尔： 学习three.js 需要学习 js css html5 canvas webgl opengl 3D坐标知识
