WebVR并不是一个新颖的事物-人们已经在过去半个多世纪中一直在讨论使用WebGL在浏览器中渲染交互式3D图形的各种实现方法。然而，新的一点是，现在有了开源库，即使是初学者也可以在非常短的时间内构建虚拟现实体验。就在24个月前，这是很难实现的。但是一些专注于此领域的热心爱好者（比如Josh Carpenter、Brandon Jones、Vlad Vukićević、Tony Parisi和Boris Smus）的努力为Web开发带来了全新的内容世界。

Anjney Midha撰写的专文：

Anjney Midha是KPCB Edge联合创始人，专注于虚拟现实、无人机和航空航天公司的投资。在创办Edge之前，Anjney是Kleiner Perkins Caufield & Byers的最年轻合伙人，并密切参与了该公司在RelateIQ（被Salesforce收购）、Ayasdi、Magic Leap、Enjoy和True Caller等公司的投资。他在斯坦福大学获得本科和研究生学位，并休学于斯坦福大学医学院生物医学信息学系。Anjney喜欢飞行超轻飞机和改装四轴飞行器。

为了证明这一点，我最近在KP的一个早间研究研讨会上制作了一个10分钟的教程，教你如何构建自己的WebVR体验，而且只需要非常少的原始工程技术。

步骤0：去看《火星救援》。我认真的。
可能是我今年最喜欢的电影，《火星救援》这部电影对原著做了很好的演绎。几个星期前我看了它，想构建火星的虚拟现实场景，因为我还没收到我买的太空旅行票。

步骤1：克隆Boris的WebVR Boilerplate存储库
Boris的起始代码项目是一个很棒的小工具，实现了所有设置WebVR项目所需的基本功能（polyfill、模式管理等）。
amidha$ git clone https://github.com/borismus/webvr-boilerplate.git

步骤2：启动本地文件服务器
这将创建一个可以在本地端口上提供WebVR应用的服务器，就像为任何常规的Web应用程序启动服务器一样。
amidha$ cd webvr-boilerplate/
amidha$ python -m SimpleHTTPServer 8000

要测试服务器是否正在运行，请打开与服务器通信的端口上的localhost。在我的情况下，这是http://localhost:8000/
现在，您应该可以看到默认的起始场景，一个在黑色背景上旋转的立方体，并有绿色的网格线。

步骤3：添加火星
让我们去Google上找一个展现电影场景华丽的图片。我喜欢这张Valles Marineris的图片：

要将它添加为背景，让我们添加几行Javascript代码，创建一个球状投影表面，我们可以在上面放置一个包围性的场景渲染图。将图片放到项目文件夹中的名为’img’的文件夹中：
//在effect.setSize(window.innerWidth, window.innerHeight)代码下添加以下代码

//创建一个球体-我们将使用内部表面来投影火星的图像
var geometry = new THREE.SphereGeometry(50, 200, 200);

// 创建材质，使用火星的纹理
var material = new THREE.MeshBasicMaterial();
material.map = THREE.ImageUtils.loadTexture(‘img/mars.jpg’);
material.side = THREE.BackSide;

// 基于几何和材质创建网格
var mesh = new THREE.Mesh(geometry, material);
var skybox = new THREE.Mesh(geometry, material);
scene.add(skybox);
现在，您应该可以看到在背景中呈现火星景象的旋转立方体：

为了火星的利益，让我们将我们的旋转立方体变成旋转的地球模型，这样他就不会感到孤单了：
// 为我们的地球模型创建3D对象
var geometry = new THREE.SphereGeometry(0.5, 32, 32);
var material = new THREE.MeshBasicMaterial();
var earthMesh = new THREE.Mesh(geometry, material);

// 定位地球网格（公平起见，如果我真的想尽力表达火星上的感受，这应该是火星的卫星-Phobos或Deimos）
对Andy Weir的科学准确性表示敬意，但找到地球纹理只需10分钟…

earthMesh.position.z = 1;
earthMesh.position.x = 15;
earthMesh.position.y = 7.25;

// 将地球网格添加到你的three.js场景中 – 我在这里找到了 http://planetpixelemporium.com/planets.html。将图像放在img目录中。

scene.add(earthMesh);
material.map = THREE.ImageUtils.loadTexture(‘img/earthmap1k.jpg’)

现在应该看起来像下面的场景：

第4步：在手机上使用Google Cardboard尝试一下
Ngrok是一个非常有用的小工具，可以将本地web服务器暴露给互联网。在项目目录中下载并安装它后，可以在运行项目的本地端口上调用它：
./ngrok http 8000

在手机浏览器中访问ngrok提供的URL，结果就是可以在手机上使用任何移动HMD（如Cardboard、Merge VR等）进行webVR体验：

就是这样了。很容易用任何高分辨率图像文件替换火星场景 – 我甚至尝试过一些例子，只需更改图像文件而不改变任何其他东西：

1 of 3

背景更换为来自Google的Land End图像

包围背景全景图像为斯坦福碟

背景更换为来自Google的星空图像

你可以在这里找到这个项目的所有代码。

插: 如果您有自己的项目，并想进行交流 – 欢迎与我联系！