THREE.JS入门教程(6)创建自己的全景图实现步骤


Posted in Javascript onJanuary 25, 2013

译序
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
0.简介
全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。
要做一个全景图,你需要一个软件用来做一张全景图片(译者注:如果你没有那些特殊的设备)。我使用了iPhone上的Microsoft Photosynth软件来制作。
1.环境纹理
首先什么是环境纹理?在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景(虚拟的或现实的)的观察,场景的样子被“贴”在了立方体的内部表面。想象一下,你站在山顶,向前看,向左看,向右看,向上看,向下看,最后向后看。每一次你都看到了这个“立方体”的内部表面,你就站在这个立方体的中心。如果这个立方体足够大,就很难分辨出立方体的棱和角,而给你一种错觉:你处在一个很大的环境里面。如果你还没弄明白,那么维基百科上的cube maps条目会非常有帮助。
这很酷,但是这怎么用?我们可以像做反射和折射一样,而且事实上这两者的函数都已经内建在GLSL,WebGL的着色器语言上了。你只需要传递给着色器6张纹理图片,每张代表立方体的一个内表面,然后告诉WebGL这是个立方体纹理,然后就可以使用上面的效果了。
半轴:这个术语服务于立方体纹理。因为我们通常使用三个轴来描述三维空间:x轴、y轴、z轴,所以用于立方体纹理的图片也用轴的名称来标识了。一共六张图片,每个轴两张图片,正半轴一个,负半轴一个。
2.创建全景图片
创建全景图片的第一步就是走出户外,使用手机上的应用来照一张。我在伦敦的金融区转了一圈,然后在Gherkin照了一张。我获得了下面这张图片:
THREE.JS入门教程(6)创建自己的全景图实现步骤 
值得指出的是,这个应用将图片做成了贴到球体上的那种。这看上去不错,但是我们现在需要将它贴到一个立方体的内表面上,所以还要处理一下这张图。
3.转化到立方体上
这部分我简短介绍一下。我把刚才获得的那张照片载入到一个3D建模软件中,比如Maya或者Blender,然后将其粘贴到一个球体的内表面上。然后我创建了6个正射投影的相机,每一个都对应于一个半轴。最后我将这6个相机捕捉到的图像保存了下来。具体怎么完成比较复杂,也没必要在这里讲解,所以我写了一个Blender脚本文件,所有的一切都设置好了。

使用这个脚本文件你只需要
1.将你自己的全景图重命名为 environment.jpg;
2.将全景图和Blender脚本文件放在同一个文件夹下;
3.载入脚本文件;
4.点击右侧的 Animation 按钮;
5.等一会儿,6张图像已经创建好了。
很Cool吧?现在你可以重新命名这些图像,使之与每一个半轴相匹配。比如这样:
•0001.png → pos-z.png
•0002.png → neg-x.png
•0003.png → neg-z.png
•0004.png → pos-x.png
•0005.png → neg-y.png
•0006.png → pos-y.png
4.加入场景
现在我们已经获得了环境纹理,然后将其载入到场景中。Three.js使这变得非常简单:

// 纹理图像的url 
var urls = [ 
'path/to/pos-x.png', 
'path/to/neg-x.png', 
'path/to/pos-y.png', 
'path/to/neg-y.png', 
'path/to/pos-z.png', 
'path/to/neg-z.png' 
], 
// 打包成我们需要的对象 
cubemap = THREE.ImageUtils. 
loadTextureCube(urls); 
// 设置格式为RGB 
cubemap.format = THREE.RGBFormat;

现在只需要将cubemap指定到一个材质中去就可以了!
var material = new THREE 
.MeshLambertMaterial({ 
color: 0xffffff, 
envMap: cubemap 
});

5.小结
就这样了,实现一个全景图很酷,尤其是你可以将你自己的地方制作为WebGL全景图。和往常一样,我打包了这次教程的源码
Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
使用JavaScript动态设置样式实现代码(2)
Jan 25 #Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 #Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 #Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 #Javascript
ajax处理php返回json数据的实例代码
Jan 24 #Javascript
You might like
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP attributes()函数讲解
2019/02/03 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
python创建学生成绩管理系统
2019/11/22 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
校园活动宣传方案
2014/03/28 职场文书
天地会口号
2014/06/17 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis