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 相关文章推荐
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
Extjs学习笔记之七 布局
Jan 08 Javascript
js prototype截取字符串函数
Apr 01 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
JS原型与继承操作示例
May 09 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 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
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
PHP使用file_get_contents发送http请求功能简单示例
2018/04/29 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
js实现表格字段排序
2014/02/19 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
js代码实现轮播图
2020/05/04 Javascript
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
解决Opencv+Python cv2.imshow闪退问题
2020/04/24 Python
python批量修改交换机密码的示例
2020/09/22 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
CSS3 简写animation
2012/05/10 HTML / CSS
机电专业个人求职信范文
2013/12/30 职场文书
不假外出检讨书
2014/01/27 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
检讨书怎么写?
2019/06/21 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
Python中非常使用的6种基本变量的操作与技巧
2022/03/22 Python
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技