10分钟教你完成一个虚拟现实WEB体验

发表于2015-12-30

WebVR并不是一个新事物，人们讨论使用WebGL在浏览器呈现互动3D图形已经超过5年，目前已经拥有各种实现方法。然而，新的可用开源库可以让即使是新手开发者也能在很短的时间内构建虚拟现实体验。在两年前，要是在这么短的时间内完成这个事情是一件非常困难的。但经过一些热心开发者的努力（Josh Carpenter、Brandon Jones、Vlad Vuki?evi?、Tony Parisi和Boris Smus，这里只是提到部分人。），他们为网页内容开辟了一片新天地。

　　为了证明这一点，以下是一个10分钟的教程，教你如何用最短的工程量去构建属于自己的WebVR体验。

　　步骤0：去认真的看《火星救援(The Martian)》

　　《火星救援》可能是我今年最喜欢的电影，《火星救援》非常尊重书本原作。几周前我看了它，我想构建一个相当于火星表面的实地考察虚拟现实环境，因为我的航天票仍然还没能拿到。

　　步骤1：下载Boris的boilerplate代码

　　Boris的boilerplate项目是一个很棒的初学者代码，可以实现所有基本功能，你需要设置一个webVR项目（polyfill, mode manager等.）。

　　amidha$ git clone https://github.com/borismus/webvr-boilerplate.git

步骤2：启动一个本地文件服务器

　　设置一个服务器，它可以让你使用本地端口搭建webVR应用程序，就跟你必须得启动常规的web应用程序服务器一样。

　　amidha$ cd webvr-boilerplate/amidha$ python -m SimpleHTTPServer 8000

　　为了测试您的服务器正在运行，用网页打开主机服务器的端口，像我这样：http://localhost:8000/

　　您现在应该看到默认的样式，一个旋转的蓝色立方块在一个布满绿色网格线的黑色背景中间。

　　步骤3：添加背景图

　　让我们去谷歌找一张能表现这部电影主题的图片。我喜欢这张水手号峡谷背景。

　　添加你的背景，让我们添加几行脚本语言创建一个球面投影表面，我们可以将一个全景场景进行渲染。把图片放到你的项目的“IMG”文件夹下面。

// Create 3D objects for our Earth modelvar

geometry = new THREE.SphereGeometry(0.5, 32, 32);

var material = new THREE.MeshBasicMaterial();

var earthMesh = new THREE.Mesh(geometry, material);

// Position earth mesh [to be fair, this should be Phobos or Deimos if I was really trying to pay homage to Andy Weir's scientific authenticity, but the Earth texturewas easier to find in 10 mins...]

earthMesh.position.z = 1;

earthMesh.position.x = 15;

earthMesh.position.y = 7.25;

// Add earth mesh to your three.js scene - I found it here http://planetpixelemporium.com/planets.html. Place the image in the img

directory.scene.add(earthMesh);

material.map = THREE.ImageUtils.loadTexture(‘img/earthmap1k.jpg’)

　　您现在应该看到立方体旋转在球形的火星场景背景图中:

　　由于这是火星的缘故，我们把旋转的立方体放进一个地球模型里面，这样可以让火星不会那么孤独：