[译] THREE.JS入门教程-6.创建自己的全景图

译序

Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。

国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享。 

0.简介

全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。

要做一个全景图,你需要一个软件用来做一张全景图片(译者注:如果你没有那些特殊的设备)。我使用了iPhone上的Microsoft Photosynth软件来制作。

1.环境纹理

首先什么是环境纹理?在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景(虚拟的或现实的)的观察,场景的样子被“贴”在了立方体的内部表面。想象一下,你站在山顶,向前看,向左看,向右看,向上看,向下看,最后向后看。每一次你都看到了这个“立方体”的内部表面,你就站在这个立方体的中心。如果这个立方体足够大,就很难分辨出立方体的棱和角,而给你一种错觉:你处在一个很大的环境里面。如果你还没弄明白,那么维基百科上的cube maps条目会非常有帮助。

这很酷,但是这怎么用?我们可以像做反射和折射一样,而且事实上这两者的函数都已经内建在GLSL,WebGL的着色器语言上了。你只需要传递给着色器6张纹理图片,每张代表立方体的一个内表面,然后告诉WebGL这是个立方体纹理,然后就可以使用上面的效果了。

半轴:这个术语服务于立方体纹理。因为我们通常使用三个轴来描述三维空间:x轴、y轴、z轴,所以用于立方体纹理的图片也用轴的名称来标识了。一共六张图片,每个轴两张图片,正半轴一个,负半轴一个。

2.创建全景图片

创建全景图片的第一步就是走出户外,使用手机上的应用来照一张。我在伦敦的金融区转了一圈,然后在Gherkin照了一张。我获得了下面这张图片:

值得指出的是,这个应用将图片做成了贴到球体上的那种。这看上去不错,但是我们现在需要将它贴到一个立方体的内表面上,所以还要处理一下这张图。

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全景图。和往常一样,我打包了这次教程的源码,如果你喜欢它,或者有什么问题,都可以通过emailtwitter联系我。

posted @ 2013-01-25 08:53 一叶斋主人 阅读(...) 评论(...) 编辑 收藏