VR进化论|教你搭建通用的WebVR工程
本文旨在介绍如何搭建WebVR工程以支持多场景开发。css
首先，做为一个基本的前端工程来讲，咱们须要让代码“工程化”，不只要提供编译构建、压缩打包功能，还要让每一个页面模块化；
延伸到WebVR工程，咱们也须要考虑就必须考虑“多页面”模块化，即提供多个场景模块化开发，由于一个完整的WebVR App不单单只有一个场景。这里能够参考google的WebVR多场景示例：https://vr.chromeexperiments....html
多场景开发，最简单的方式就是，一个场景对应一份html、css、js，多个页面须要多个html，每次页面跳转须要从新进行VR渲染进行初始化。
实际上咱们在多场景中，场景初始化只须要执行一次（好比，建立一个场景->建立相机->建立渲染器），咱们只须要一个index.html做为入口页面，将VR场景初始化、建立、回收、切换封装成公用组件。前端
在首次进入场景时进行初始化，在须要场景切换时进行场景回收和按需加载，这样一来，用户切换场景时，不用把时间浪费在等待html和初始化场景上。基于以上思路，本人总结的一套WebVR工程搭建方案，供各位参考。node
项目地址：https://github.com/YorkChan94...
Demo：https://yorkchan94.github.io/...
相关技术栈：three.js、webpack2、es6/7
想详细了解WebVR开发步骤，也欢迎参考个人文章《VR大潮来袭——前端开发能作些什么》webpack
实现功能
VR多场景模块化开发git
支持VR场景建立、回收、切换es6
项目自动化构建与压缩打包github
支持es7/6web
WebVR相关库
three.jschrome
vrcontrols.js
vreffect.js
webvr-manager.js
webvr-polyfill.js
three-onevent.js
主要目录结构
webpack |-- webpack.config.js # 公共配置 |-- webpack.dev.js # 开发配置 |-- webpack.prod.js # 生产配置 src # 项目源码 |-- page # WebVR场景目录 | |-- index.js # WebVR入口场景 | |-- page1.js | |-- page2.js |-- common # 公共目录，包括webvr封装类和polyfill | |-- VRCore.js | |-- VRPage.js | |-- vendor.js |-- lib # vr三方插件，包括相机控制器和分屏器 | |-- vrcontrol.js | |-- vreffect.js |-- assets # 素材目录，包括3d模型、纹理、音频等 | |-- audio | |-- model | |-- texture |-- index.html # WebVR公用页面 package.json READNE.md
咱们先来看看index.html，其实整个body就只有一个dom，用来append咱们的canvas，毕竟因此场景都在canvas里运行。
<!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-INDEX</title>
</head>
<body>
<section class="webvr-container">
</section>
</body>
</html>
有了公用html，咱们但愿这样开发WebVR应用，即一个场景对应一个js脚本，形如：
// 继承VRPage父类，开发每个场景
import VRPage from 'common/js/VRPage';
class Page1 extends VRPage {
start() { // 启动渲染以前，建立场景3d模型
let geometry = new THREE.CubeGeometry(5,5,5);
let material = new THREE.MeshBasicMaterial( { color:0x00aadd} );
this.box = new THREE.Mesh(geometry,material);
this.box.position.set(3,-2,-3);
WebVR.Scene.add(this.box);
}
loaded() { // 场景资源加载完毕，可执行音频播放等。
}
update(delta) { // 开启渲染以后，执行模型动画
this.box.rotation.y += 0.05;
}
}
export default (() => {
return new Page1();
})();
这里参照了相似Unity3d和React的开发模式，在start方法里建立3d模型，在update方法里处理3d动画，这样的好处在于：
每个场景均可以进行独立开发而互不影响；
一旦VR环境初始化以后，不须要在每次场景跳转切换时从新初始化一遍。
VRCore.js做为公用模块管理整个webvr应用的全部子场景，包括场景初始化、VR相机渲染、场景切换、场景回收等静态函数。
VRPage.js做为每一个场景的工厂类，支持不一样3d页面（场景）之间的代码独立。
每个VR页面的生命周期都是：建立物体->加载模型->启动渲染的过程，所以，须要建立一个基类，来实现每个VR场景实例的生命周期。
//common/VRPage.js
import * as WebVR from 'VRCore.js' //管理全部场景的公用模块
// VR场景工厂
export default class VRPage {
constructor(options={}) {
// 建立场景，若是场景已初始化
WebVR.createScene(options);
this.start();
this.loadPage();
}
loadPage() {
THREE.DefaultLoadingManager.onLoad = () => {
// 模型加载完毕，即开启渲染
WebVR.renderStart(this.update);
this.loaded();
}
}
start() {
// 实例的start方法将在启动渲染以前，场景相机初始化后执行。
}
loaded() {
// 实例的loaded方法将在场景资源加载后执行。
}
update(delta) {
// 实例的update方法将在渲染器每一次渲染时执行。
}
}
这里使用THREE.DefaultLoadingManager.onLoad方法监听场景是否加载完毕，一旦加载完毕，便启动渲染。
WebVR场景首次渲染
主要包括四个步骤
新建场景
建立VR相机
加载场景脚本与资源
开启动画渲染
VR环境初始化
function createScene({domContainer=document.body,fov=70,far=4000}) {
// 建立场景
Scene = new THREE.Scene();
// 建立相机
Camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,0.1,far);
Camera.position.set( 0, 0, 0 );
Scene.add(Camera);
// 建立渲染器
Renderer = new THREE.WebGLRenderer({ antialias: true } );
Renderer.setSize(window.innerWidth,window.innerHeight);
Renderer.shadowMapEnabled = true;
Renderer.setPixelRatio(window.devicePixelRatio);
domContainer.appendChild(Renderer.domElement);
initVR();
resize();
}
首先是three.js开发三部曲，建立场景、相机、渲染器，接着调用initVR函数来完成VR场景分屏和陀螺仪控制，WebVR基本开发步骤能够参考。
function initVR() {
// 初始化VR分屏器和控制器
Effect = new THREE.VREffect(Renderer);
Controls = new THREE.VRControls(Camera);
// 初始化VR管理器
Manager = new WebVRManager(Renderer, Effect);
window.addEventListener( 'resize', e => {
// 调整渲染器和相机以适应窗口拉伸时宽高变更
Camera.aspect = window.innerWidth / window.innerHeight;
Camera.updateProjectionMatrix();
Effect.setSize(window.innerWidth, window.innerHeight);
}, false );
}
开启动画渲染
// VRCore.js
function renderStart(callback) {
// 设置loopID变量记录每一帧ID
loopID = 0;
const loop = () => {
if(loopID === -1) return;
loopID = requestAnimationFrame(loop);
callback();
Controls.update();
Manager.render(Scene, Camera);
};
loop();
}
这里传入参数动画渲染作了三件事，使用loopID做为整个VR应用的全局变量，记录每一帧动画的更新；更新相机控制器和VR渲染器，
WebVR场景切换
主要包括四个步骤
暂停渲染
清空当前场景物体
请求并加载目标场景脚本与资源
重启渲染
暂停动画渲染
function renderStop() {
if (loopID !== -1) {
window.cancelAnimationFrame(loopID);
loopID = -1;
}
}
回收当前场景
function clearScene() {
for(let i = Scene.children.length - 1; i >= 0; i-- ) {
Scene.remove(Scene.children[i]);
}
}
按需加载
切换到下一场景，咱们须要请求对应的场景脚本，这里使用webpack2的import函数进行代码分离，固然你也可使用require.ensure(filename => {require(filename)})方法。
import(`page/${fileName}.js`);
最终将清空当前场景与请求加载目标场景功能封装为forward跳转方法，就能够在页面里直接调用了。
// common/VRCore.js
function forward(fileName) {
renderStop();
clearScene();
import(`page/${fileName}.js`);
}
// page/index.js
...
class Index extends VRPage {
start() {
let geometry = new THREE.CubeGeometry(5,5,5);
let material = new THREE.MeshBasicMaterial({
color: 0x00aadd
});
this.box = new THREE.Mesh(geometry,material);
this.box.position.set(3,-2,-3);
// add gaze eventLisenter
this.box.on('gaze',mesh => { // gazeIn trigger
WebVR.forward('page2.js');
});
WebVR.Scene.add(box);
}
}
...
// page2.js
class page2 extends VRPage {
start() {
this.addPanorama(1000, ASSET_TEXTURE_SKYBOX);
}
addPanorama(radius,path) {
// create panorama
let geometry = new THREE.SphereGeometry(radius,50,50);
let material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load(path),side:THREE.BackSide } );
let panorama = new THREE.Mesh(geometry,material);
WebVR.Scene.add(panorama);
return panorama;
}
}
export default (() => {
return new page2();
})();
咱们在场景里建立一个立方体，当凝视到该物体时，执行forward方法跳转至page2场景。
至此，咱们的WebVR工程已经完成了一半，接下来，咱们使用Webpack2来构建咱们的工程。
webpack配置
开发环境和生产环境下webpack配置略有不一样，这里主要给出webpack的基本配置，具体可参考项目地址。
const path = require('path');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
entry: {
'vendor': './src/common/js/vendor.js',
'app': './src/page/index.js'
},
output: {
path: path.resolve(__dirname, '../dist/'),
filename: '[name].js',
sourceMapFilename: '[name].map',
chunkFilename: '[id]-chunk.js',
publicPath: '/'
},
这里咱们将webvr首个场景src/page/index.js做为项目打包入口，同时将page目录下的文件也做为单独chunk，配合按需加载来支持场景切换。
module: {
rules: [
{
test: /\.js/,
exclude: /node_modules/,
use: [
{ loader:'babel-loader',options: {
presets: ["latest",["es2015", {"modules": false}]]
}
]
},
{
test: /\.css/,
use: ['style-loader','css-loader']
},
{
test: /\.(jpg|png|mp4|wav|ogg|obj|mtl|dae)$/,
loader: 'file-loader'
}
]
},
这里引入file-loader，这样就能在场景里直接import须要用到的素材，以下。
//page/page2.js import ASSET_TEXTURE_SKYBOX from 'assets/texture/360_page2.jpg';
webpack相关的plugin配置以下
plugins: [
new CommonsChunkPlugin({
name: ['app', 'vendor'],
minChunks: Infinity
}),
new ProvidePlugin({
'THREE': 'three'，
'WebVR': path.resolve(__dirname,'../src/common/js/VRCore.js')
}),
new HtmlWebpackPlugin({
inject: true,
template: path.resolve(__dirname, '../src/index.html'),
favicon: path.resolve(__dirname, '../src/favicon.ico')
})
]
};
使用ProvidePlugin将three.js做为公用模块输出，以省去在每一个脚本import THREE from 'three'的重复工做，同时将管理全部场景的核心模块VRCore.js做为全局公用模块输出。
使用HtmlWebpackPlugin将公用的html打包到dist目录下。
polyfill配置
最后是polyfill配置，咱们须要引入webvr-polyfill和babel-polyfill来分别支持webvr API和ES6 API，并做为一个页面独立脚本。
// common/vendor.js import 'babel-polyfill'; import 'webvr-polyfill';
以上WebVR工程已经基本搭建完毕，欢迎各位提出宝贵意见，后续咱们将探索daydream和Oculus在webvr上的开发模式，敬请期待。
最后，献上前几天在google开发者网站上看到的：预测将来，不如创造将来。
- 1. VR进化论|教你搭建通用的WebVR工程
- 2. 使用WebRTC和WebVR进行VR视频通话
- 3. 【WebVR教程翻译】超简单！用A-frame快速打造你的VR网站
- 4. @4步教你idea搭建SpringCloud工程
- 5. 零起步教你搭建Discuz!论坛
- 6. 搭建idea下的vue工程教程
- 7. 基于 WebRTC 和 WebVR 实现 VR 视频通话
- 8. linux搭建Discuz论坛教程
- 9. 前端自动化构建工具——gulp环境搭建教程
- 10. 18. Html5的局: 用WebVR来解释小米VR眼镜
- 更多相关文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Swift 环境搭建 - Swift 教程
- • Git可视化极简易教程 — Git GUI使用方法
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。