WebGL初探—Three.js全景图实战

JavaScript07

WebGL初探—Three.js全景图实战,第1张

前段时间公司给了一个新需求就是写一个装修室内3D全景效果图,于是开始我的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的厉害之处还有很多很多是我还未涉及到了,以后还需要更加努力了。

《Ext JS实战(第2版)》([美]加西亚,格丽索戈诺,安德烈森)电子书网盘下载免费在线阅读

链接:https://pan.baidu.com/s/1pX9qGUofSHkNkqqT7zWpvQ

提取码:ob2t

书名:Ext JS实战(第2版)

作者:[美]加西亚,格丽索戈诺,安德烈森

译者:卢雄飞

出版社:人民邮电出版社

出版年份:2015-8-1

页数:344

内容简介:

本书分三部分,基于Ext JS 4.0全面介绍如何开发具有原生风格的富桌面Web应用,辅以大量示例帮读者理解其组件和容器。第一部分是基础知识,讲解Ext JS的丰富特性(包括UI部件以及数据存储、模型和代理等支持类)、DOM操作、组件和容器。第二部分全面介绍Ext JS部件的工作原理,内容涵盖Ext JS组件、布局管理器、表单面板、数据存储、网格面板、树形面板、图形图表、直接远程调用和拖放功能。第三部分介绍Ext JS类系统,并基于本书知识用Sencha CMD和Ext JS MVC系统开发应用。此外,第三部分不仅能让你学会Ext JS框架的更高级功能(如定制的扩展、插件,以及类加载器),还能让你掌握构建和管理Web应用的坚实理论。

作者简介:

Jesus Garcia

Modus Create公司(专注于用Sencha产品提供高端解决方案)联合创始人兼CTO、Ext JS社区知名成员、Ext JS框架贡献者、专家级Web开发者。他从2006年起开始接触Sencha,之后一直通过书籍、博客、视频、聚会和会议分享知识,另著有Sencha Touch in Action。个人博客:http://moduscreate.com/。

Grgur Grisogono

Modus Create公司负责人、Web技术布道师、JavaScript的忠实拥趸、移动及桌面Web应用大会SourceDevCon主席和创办人。他从2007年起持续关注Ext JS和Sencha Touch,其领导设计开发的应用被欧洲6个国家的政府部门和600多个市级机构使用,还为财富500强公司提供解决方案。

Jacob K. Andresen

Ext JS爱好者、大型网络应用咨询专家。他负责开发过多个大型网络项目,自2009年首次参加Ext JS会议开始即密切关注Ext JS,一直通过博客、Sencha论坛为Ext JS社区做贡献。