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

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

WBOY
Freigeben: 2016-05-16 17:42:52
Original
1255 Leute haben es durchsucht
译序
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全景图。和往常一样,我打包了这次教程的源码
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!