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

　　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

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

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

　　步骤3：添加背景图

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

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

　　//add this code below effect.setSize(window.innerWidth, window.innerHeight);//create a sphere — we’ll use the inner surface to project our Mars image on to itvar geometry = new THREE.SphereGeometry(50, 200, 200);// create the material, using a texture of marsvar material = new THREE.MeshBasicMaterial();material.map = THREE.ImageUtils.loadTexture(‘img/mars.jpg’);material.side = THREE.BackSide;// create the mesh based on geometry and materialvar mesh = new THREE.Mesh(geometry, material);var skybox = new THREE.Mesh(geometry, material);scene.add(skybox);

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

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

　　// 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 https://planetpixelemporium.com/planets.html. Place the image in the img directory.scene.add(earthMesh);material.map = THREE.ImageUtils.loadTexture(‘img/earthmap1k.jpg’)

　　现在应该是类似于下面的场景：

　　步骤4：使用ngrok、戴上谷歌纸板，放上你的手机去观看它

　　Ngrok是一个小小的实用程序，允许您本地web服务器发布在互联网上。在下载和安装它之后放进你的项目，它可以在你本地端口运行这个项目。

　　./ngrok http 8000

　　在移动浏览器上访问ngrok提供的url，你会看到一个webVR体验，你可以用你的手机加上任何虚拟现实头显（如谷歌纸板、Merge VR等等。）

　　背景图片替换很简单，你可以替换任何你想要的高分辨率图像文件，下面是我尝试替换的一些背景，其他没改，就只进行背景图替换：

　　如果你想要这个项目的所有代码，可以到这里获取。

　　文章由VR科技网提供，想了解最新虚拟现实资讯，请关注VR科技网