去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 Web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 js 语言来开发。今天，约克先森将介绍如何开发一个 WebVR 网页，在此之前，我们有必要了解 WebVR 的体验方式。
WebVR 体验模式
（图：体验 WebVR 的方式）
WebVR 的体验方式可以分为 VR 模式和裸眼模式。
1、VR 模式
-
滑配式 HMD + 移动端浏览器
如使用 cardboard 眼镜来体验手机浏览器的 webVR 网页，浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向，并告知页面需要渲染哪一个朝向的场景。
-
分离式 HMD + PC 端浏览器
通过佩戴 Oculus Rift 的分离式头显浏览连接在 PC 主机端的网页，现支持 WebVR API 的浏览器主要是火狐的 Firefox Nightly 和设置 VR enabled 的谷歌 chrome beta。
2、裸眼模式
除了 VR 模式下的体验方式，这里还考虑了裸眼下的体验浏览网页的方式，在 PC 端如果探测的用户选择进入 VR 模式，应让用户可以使用鼠标拖拽场景，而在智能手机上则应让用户可以使用 touchmove 或旋转倾斜手机的方式来改变场景视角。
WebVR 的概念大概就如此，这次我们将采用 cardboard + mobile 的方式来测试我们的 WebVR 场景，现在踏上我们的开发之旅。
准备工作
技术和框架：three.js for WebGL
Three.js 是构建 3d 场景的框架，它封装了 WebGL 函数，简化了创建场景的代码成本，利用 three.js 我们可以更优雅地创建出三维场景和三维动画。
测试工具：智能手机 + 滑配式头显
推荐使用 cardboard 或者某宝上三十块钱的高仿货。当然，如果你练就了裸眼就能将手机双屏画面看成单屏的能力也可以忽略。
需要引入的 js 插件：
1.three.min.js
2.webvr-polyfill.js
3.VRcontrols.js
4.VReffect.js
5.webvr-manager.js
webvr-polyfill.js
由于 WebVR API 还没被各大主流浏览器支持，因此需要引入 webvr-polyfill.js 来支持 WebVR 网页，它提供了大量 VR 相关的 API，比如 Navigator.getVRDevices() 获取 VR 头显信息的方法。
VRControls.js
VR 控制器，是 three.js 的一个相机控制器对象，引入 VRcontrols.js 可以根据用户在空间的朝向渲染场景，它通过调用 WebVR API的 orientation 值控制 camera 的 rotation 属性。
VREffect.js
VR 分屏器，这是 three.js 的一个场景分屏的渲染器，提供戴上 VR 头显的显示方式，VREffect.js 重新创建了左右两个相机，对场景做二次渲染，产生双屏效果。
webvr-manager.js
这是 WebVR 的方案适配插件，它提供 PC 端和移动端的两种适配方式，通过 new WebVRManager() 可以生成一个VR图标，提供 VR 模式和裸眼模式的不同体验，当用户在移动端点击按钮进入 VR 模式时，WebVRManager 便会调用 VREffect 分屏器进行分屏，而退出 VR 模式时，WebVRManager 便用回 renderer 渲染器进行单屏渲染。
具体使用方法我们将在下文说明。
3D 场景构建
首先我们创建一个 HTML 文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"> <meta name="viewport" content=" width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> <title>webVR-helloworld</title> <style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
</body>
<script src="./vendor/three.min.js"></script>
<script src="./vendor/webvr-polyfill.js"></script><script src="./vendor/VRControls.js"></script>
<script src="./vendor/VREffect.js"></script>
<script src="./vendor/webvr-manager.js"></script><script src="./main.js"></script>
</html>
接下来编写 js 脚本，开始创建我们的 3d 场景。
1、创建场景
Three.js 中的 scene 场景是绘制我们 3d 对象的整个容器
var scene = new THREE.Scene();
2、添加相机
（图：Three.js 的相机）
Three.js 中的 camera 相机代表用户的眼睛，我们通过设置 FOV 确定视野范围。
//定义一个60°的视角，视线范围在1到1000的透视相机
var camera = new THREE. newTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);scene.add(camera)
3、添加渲染器
Three.js 的渲染器用来渲染 camera 所看到的画面
//初始化渲染器
antialias参数为ture表示开启抗锯齿策略
var renderer = new THREE.WebGLRenderer
({ antialias: true } );
//设置渲染器渲染尺寸
renderer.setSize
(window.innerWidth,window.innerHeight);
//设置渲染背景为白色
renderer.setClearColor(0xeeeeee);
//将渲染场景的canvas放入body标签里
document.body.appendChild
(renderer.domElement);
4、添加一个立方体网格
// 创建立方体
var geometry = new THREE.CubeGeometry
( 10,10,10);
var cubematerial = new
THREE.MeshLambertMaterial
( { color: 0xef6500,needsUpdate:
true,opacity:1,transparent:true} );
var cube = new THREE.Mesh
( geometry, Cubematerial );
cube.position.set(0,100,-50);
cube.rotation.set
(Math.PI/6,Math.PI/4,0);
scene.add(cube);
5、启动动画
产生动画的原理就是让 camera 持续连拍，同时每一次改变物体的属性，通过 requestAnimationFrame() 方法递归的方式来持续更新场景对象属性，你可以将它理解为 setTimeout 的优化版。相比 setTimeout 函数，requestAnimationFrame 可以保证动画渲染不会因为主线程的阻塞而造成跳帧。
function animate() { //让立方体旋转
cube.rotation.y += 0.01;
//渲染器渲染场景，等同于给相机按下快门
renderer.render(scene, camera);
//递归运行该函数requestAnimationFrame( animate ); } animate();//启动动画
（图：基本的 3d 场景）
至此，我们已经绘制了一个简单的 3d 场景并且让它动了起来，接下来，我们需要让我们的场景可以支持 WebVR 模式。
WebVR 场景开发
WebVR 网页的基本原理其实是通过浏览器的 WebVR API 获取用户输入，进而控制相机的视角，在 VR 模式下通过 VR 控制器和 VR 分屏器以二分屏 + gyroscope （使用水平陀螺仪）的方式显示画面，裸眼情况下提供全屏 + touchmove/gyroscope。
（图：WebVR 网页分屏）
现在我们开始分别创建上文所说的 VR 控制器和 VR 分屏器
//初始化VR控制器需要传入场景相机
var vrControls = new
THREE.VRControls(camera);
//初始化VR渲染器需要传入场景渲染器
var vrEffect = new
THREE.VREffect(renderer);
//初始化VR适配器，传入渲染器和分屏器
var vrManager = new
WebVRManager(renderer, vrEffect);然后在前面创建的场景渲染函数里调用
function animate() {
cube.rotation.y += 0.01;
//实时更新相机的位置和转角vrControls.update();
vrManager.render(scene, camera);
//递归运行该函数
requestAnimationFrame( animate );}
至此，我们已经完成了一个基本的 webVR 网页，不过少了点交互效果好像，敬请期待 Web 开发的新世界——WebVR 之交互事件。
（图：添加分屏效果）
结语：目前，国外的谷歌、火狐、Facebook 已推出支持 WebVR 浏览器的版本，微软也宣布将推出自己的 VR 浏览器，随着后期 5G 网络极速时代的到来以及 HMD 头显的价格和平台的成熟，WebVR 的体验方式将是革命性的，用户通过 WebVR 浏览网上商店，线上教学可进行“面对面”师生交流等，基于这种种应用场景，我们可以找到一个更好的动力去学习 WebVR 。
作者：YorkChan
原文链接：
http://www.jianshu.com/p/c9c03e14ba9d#
文章转载已获作者许可，转载请注明出处。
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
