Three.js 实现全景图教程：从环境纹理到立方体贴图

Three.js 全景图制作概述

Three.js 是一款优秀的开源 WebGL 库，它允许 JavaScript 直接操作 GPU，从而在浏览器中实现真正的 3D 渲染。然而，该技术目前仍处于发展阶段，相关学习资料相对稀缺，开发者通常需要依靠 Demo 源码以及 Three.js 自身的源代码来进行深入学习。

全景图效果非常引人注目。借助 Three.js，制作个人专属的全景图其实并没有想象中那么困难。

制作全景图的前提是拥有一张全景图片。如果你没有专业的全景拍摄设备，可以使用相关软件来生成。例如，作者使用了 iPhone 上的 Microsoft Photosynth 软件来制作所需的图片。

理解环境纹理与立方体纹理

首先，我们需要了解什么是环境纹理。在 WebGL 或 OpenGL 中，环境纹理实际上是一种特殊的立方体纹理。这种纹理是对整个场景（无论是虚拟还是现实）的观察结果，场景的影像被“贴”在立方体的内表面上。想象你站在山顶，分别向前、左、右、上、下及后方观看，每一次看到的景象对应立方体的一个内表面，而你就位于立方体的中心。如果立方体足够大，其棱角将难以察觉，从而营造出身处广阔环境的错觉。若对此概念仍感困惑，参考维基百科中关于 cube maps 的条目会有很大帮助。

那么如何应用这种纹理呢？其用法类似于反射和折射，事实上 GLSL（WebGL 的着色器语言）中已内置了相关函数。你只需向着色器传递六张纹理图片，分别代表立方体的六个内表面，并告知 WebGL 这是一个立方体纹理，即可实现上述效果。

这里涉及“半轴”这一术语，它专门用于描述立方体纹理。由于三维空间通常由 x、y、z 三个轴来描述，因此立方体纹理的图片也依据轴的名称进行标识。总共需要六张图片，每个轴对应两张：一张正半轴，一张负半轴。

获取与处理全景图片

创建全景图片的第一步是走出户外，利用手机应用进行拍摄。作者在伦敦金融区漫步，并在 Gherkin 大楼旁拍摄了一张照片，得到了如下结果：

需要注意的是，该应用生成的图片是用于贴在球体表面的。虽然视觉效果不错，但我们需要将其贴到立方体的内表面上，因此必须对这张图片进行进一步处理。

这部分内容简要介绍。作者将上述照片导入 3D 建模软件（如 Maya 或 Blender），并将其粘贴到球体的内表面。随后，创建了六个正射投影相机，每个相机对应一个半轴。最后，保存这六个相机捕捉到的图像。具体操作较为复杂，此处不再赘述，作者编写了一个 Blender 脚本文件，其中已预设好所有参数。

1. 将你自己的全景图重命名为 environment.jpg；

2. 将全景图和 Blender 脚本文件放在同一个文件夹下；

3. 载入脚本文件；

4. 点击右侧的 Animation 按钮；

5. 等待片刻，六张图像便已创建完成。

效果不错吧？现在你可以重命名这些图像，使其与每个半轴的名称相匹配。例如：

• 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

在 Three.js 中加载与应用立方体纹理

现在我们获得了环境纹理，接下来需要将其载入到场景中。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
}); 

就这样了，实现一个全景图很酷，尤其是你可以将你自己的地方制作为WebGL全景图。和往常一样，我打包了这次教程的源码