使用three.js开发VR内容-多媒体技术与虚拟现实

直接使用WebGL＋WebVR的应用程序接口(API)，是一种更加靠近底层更加灵活创造WebVR内容的方法。这种方法相比于A-Frame的优势是可以将VR的支持方便地引入到用户的Web3D引擎中，同时对于底层，特别是渲染模块，可以做更多优化操作，从而提升VR运行时的性能与体验。

目前，有许多流行的Web3D渲染引擎，如three.js和babylon.js等。下面以three.js为例，说明如何在three.js上制作WebVR内容。

1.获取three.js框架

从https://github.com/mrdoob/three.js/tree/dev/build中下载文件three.js，保存在本地文件夹，如webVR＿threejs中。

2.使用three.js框架

下面根据three.js官方示例，来介绍three.js的概念和基础布局场景。

在WebVR＿threejs文件夹中创建test＿threejs.html文件，并输入下面的代码:

下面对其中的javascript代码进行说明:

(1)创建场景。为了使用three.js显示，需要创建场景、相机和渲染器。

①建立场景。“var scene＝new THREE.Scene()；”表示建立一个场景。

②建立相机。创建一个相机“var camera＝new THREE.PerspectiveCamera(75，window.innerWidth/window.innerHeight，0.1，1000)；”。其中，第1个参数是视野，表示在任何给定时刻显示器上看到的场景的范围，以度为单位；第2个参数是宽高比。(www.xing528.com)

③建立渲染器。“var renderer＝new THREE.WebGLRenderer()；”是使用WebGLRenderer创建渲染器。

除了创建渲染器实例，还需要设置渲染应用程序的大小。可以设置浏览器窗口的宽度和高度，但对于性能密集型场景，可以使用setSize设置较小的值。

(2)添加模型。在场景中添加一个立方体。

①创建一个立方体。“var geometry＝new THREE.BoxGeometry(1，1，1)；”是使用BoxGeometry创建一个多维数据集，包含数据集中的顶点和面的对象。

②上色。three.js中有几种材质，本例中使用MeshNormalMaterial方法，“var material＝new THREE.MeshNormalMaterial()；”也可以使用MeshBasicMaterial方法，如“var material＝new THREE.MeshBasicMaterial({color:0xff0000})；”创建一个红色的立方体。

③将立方体添加到场景。创建一个网格对象Mesh“var cube＝new THREE.Mesh(geometry，material)；”，然后调用scene.add()，将立方体添加到场景中。默认情况下，添加的对象显示到坐标(0，0，0)的位置，这样，会导致相机和立方体在彼此内部，所以，使用“camera.position.z＝5；”将相机稍微移出一点。

(3)渲染场景。利用requestAnimationFrame在刷新屏幕时不断渲染场景。

(4)使立方体运动。在场景刷新时修改立方体属性“cube.rotation.x＋＝0.01；cube.rotation.y＋＝0.01；”，使其运动。

3.使用Google Chrome浏览器执行文件

使用浏览器打开“test＿threejs.html”文件，可以看到一个彩色立方体在不断旋转。