WebVR综合案例-多媒体技术与虚拟现实

使用A-frame搭建一个以机房教室为主题的VR场景，并进行漫游。

1.构建三维模型

使用3ds Max制作三维模型时，需要遵循一定的工作流程，按照工作内容的不同，可以分为四个阶段:创建模型，给模型赋予材质、贴图，创建相机与灯光，渲染输出。

机房教室内包含地板、椅子、桌子、窗帘、黑板、鼠标、门、灯、电脑、电脑主机、空调等子物体。为了建立一个教室，首先要构建出教室内每一种实体的三维模型。图8-5～图8-12为创建的部分实体的三维模型(子模型)。

图8-5　地板

图8-6　椅子

图8-7　桌子

图8-8　电脑显示器

图8-9　电脑主机

图8-10　门

图8-11　空调

图8-12　灯(www.xing528.com)

2.构建整体模型

各个子模型创建之后，便要将子模型整合到一起，形成一个教室。在A-Frame中，相机的初始位置在原点(0，0，0)。而3ds Max中构建的模型导出后已经包含了其大小、位置等信息。为了使模型导出后为正常大小，采用了如下方式:

(1)先进入地板模型3ds Max文件中，将地板中心的世界坐标置于原点附近。

(2)保存并导出为OBJ文件，并放入VR场景中，观察场景中的地板大小状况。若是地板比预期大，则在地板模型3ds Max文件中将地板适当缩小；反之，则将地板适当放大。重复该步骤，直到地板的大小与位置符合预期。

(3)以地板为基础，合并其他子模型。

(4)模型组建好之后，将子模型分别导出为OBJ文件与MTL文件。OBJ文件中包含了模型的点面数据，MTL文件中则描述该模型的纹理。

3.场景构建

使用A-Frame构建VR场景。

(1)子模型导入。A-Frame中，不能直接导入MAX文件模型，需要将它们分别导出为OBJ文件和MTL文件。OBJ模型和MTL纹理准备好后，可以通过标签预加载。之后，通过在场景中创建该实体。由于在模型构建部分已调整好各个子模型的相对位置，因此，直接创建实体即可。下面的代码是将地板导入:

(2)动画制作。在A-Frame中，可以使用标签创建动画，使实体按照需要的方式移动，修改其位置、旋转、比例甚至颜色等属性。

4.部分程序代码

5.搭建网站和浏览

在Web服务器创建网站后，在浏览器中使用Google Chrome浏览该网站，如图8-13所示。在场景中，使用W、A、S、D键可以前、后、左、右移动漫游。

图8-13　WebVR综合案例——教室漫游