摘要：
... 
本文旨在介绍如何搭建WebVR单页面工程以支持多场景开发。
首先，作为一个基本的前端工程来说，我们需要让代码“工程化”，不仅要提供编译构建、压缩打包功能，还要让每个页面模块化；
延伸到WebVR工程，我们也需要考虑就必须考虑“多页面”模块化，即提供多个场景模块化开发，因为一个完整的WebVR App不仅仅只有一个场景。这里可以参考google的WebVR多场景示例：https://vr.chromeexperiments.com/
多场景开发，最简单的方式就是，一个场景对应一份html、css、js，多个页面需要多个html，每次页面跳转需要重新进行VR渲染进行初始化。
实际上我们在多场景中，场景初始化只需要执行一次（比如，创建一个场景->创建相机->创建渲染器），我们只需要一个index.html作为入口页面，将VR场景初始化、创建、回收、切换封装成公用组件。
在首次进入场景时进行初始化，在需要场景切换时进行场景回收和按需加载，这样一来，用户切换场景时，不用把时间浪费在等待html和初始化场景上。基于以上思路，本人总结的一套WebVR工程搭建方案，供各位参考。
项目地址：https://github.com/YoneChen/webvr-webpack2-boilerplate
Demo：https://YoneChen.github.io/webvr-webpack2-boilerplate/dist/
相关技术栈：、、
想详细了解WebVR开发步骤，也欢迎参考我的文章《VR大潮来袭——前端开发能做些什么》
- VR多场景模块化开发
- 支持VR场景创建、回收、切换
- 项目自动化构建与压缩打包
- three.js
- tween.js
- webvr-polyfill.js
我们先来看看index.html，其实整个body就只有一个dom，用来append我们的，毕竟所以场景都在里运行。
有了公用html，我们希望这样开发WebVR应用，配置一个入口路由列表，一个场景对应一个js脚本。
首先是入口，以配置场景的路由跳转并传入欲渲染的dom。
单个场景的页面实例：
这里参照了类似Unity3d和React的开发模式，在start方法里创建3d模型，在update方法里处理3d动画，这样的好处在于：
- 每一个场景都可以进行独立开发而互不影响；
- 一旦VR环境初始化之后，不需要在每次场景跳转切换时重新初始化一遍。
VRCore.js作为公用模块管理整个webvr应用的所有子场景，包括场景初始化、VR相机渲染、场景切换、场景回收等静态函数。
VRPage.js作为每个场景的工厂类，支持不同3d页面（场景）之间的代码独立。
每一个VR页面的生命周期都是：创建物体->加载模型->启动渲染的过程，因此，需要创建一个基类，来实现每一个VR场景实例的生命周期。
这里使用方法监听场景是否加载完毕，一旦加载完毕，便启动渲染。
主要包括四个步骤
- 新建场景
- 创建VR相机
- 加载场景脚本与资源
- 开启动画渲染
首先是three.js开发三部曲，创建场景、相机、渲染器，接着调用函数来完成VR场景分屏和陀螺仪控制，WebVR基本开发步骤可以参考。
这里动画渲染主要封装了three.js的方法，入参作传入一个回调方法，这个方法会在动画渲染的每一帧中执行。
主要包括四个步骤
- 暂停渲染
- 清空当前场景物体
- 请求并加载目标场景脚本与资源
- 重启渲染
切换到下一场景，我们需要请求对应的场景脚本，这里使用webpack2的import函数进行代码分离，当然你也可以使用方法。
最终将清空当前场景与请求加载目标场景功能封装为跳转方法，就可以在页面里直接调用了。
我们在场景里创建一个立方体，当凝视到该物体时，执行方法跳转至场景。
除了按需加载，考虑到是单页面应用，我们还需对页面的history堆栈进行管理，在实际的代码中，页面跳转和按需加载被封装成对象，管理页面路由跳转。
至此，我们的WebVR工程已经完成了一半，接下来，我们使用Webpack2来构建我们的工程。
开发环境和生产环境下webpack配置略有不同，这里主要给出webpack的基本配置，具体可参考项目地址。
这里我们将webvr首个场景作为项目打包入口，同时将page目录下的文件也作为单独chunk，配合按需加载来支持场景切换。
使用将作为公用模块输出，以省去在每个脚本的重复工作，同时将管理所有场景的核心模块作为全局公用模块输出。
使用将公用的html打包到目录下。
最后是polyfill配置，我们需要引入webvr-polyfill来支持webvr API，作为一个页面独立脚本。
以上WebVR工程已经基本搭建完毕，其重点是如下：
- 根据场景设计了VR页面实例的渲染周期
- WebVR单页面的路由管理和脚本动态请求
最后，欢迎关注专栏《WebVR技术庄园》，不定期更新，谢谢！
