$ git clone https://github.com/guoguicheng/mxreality.js.git
$ cd mxreality.js
$ npm install
$ gulp build
<script src="./build/three.js"></script>
<script src="./build/mxreality.js"></script>
<!-- If play mode is vr.resType.sliceVideo,you need add hls.js scripts -->
<script src="./libs/hls.js"></script>
<!-- If play mode is vr.resType.flvVideo,you need add flv.js scripts -->
<script src="./libs/flv.js"></script>
<div id='example'></div>
<script>
container=document.getElementById('example')
renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
var vr=new VR(scene,renderer,container);
vr.init(function(){
})
vr.playPanorama('360.mp4',vr.resType.video);
// play panorama video
vr.resType.video
// play skybox mode
vr.resType.box
// auto fix panorama images sky top and bottom
vr.resType.slice
// play panorama video of the hls stream (depend hls.js)
vr.resType.sliceVideo
// play panorama flv video (depend flv.js)
vr.resType.flvVideo
</script>
-
13、skybox
-
16、vr video
-
22、ar examples1
-
23、ar exampels2
three.js (required) hls.js(non-required) flv.js(non-required)
In order to combine the powerful WebGL engine to create a player that can combine custom rendered scenes and interact with objects in the scene to process events, rather than just panoramic video images, the player has sacrificed some load performance to integrate Threejs's powerful 3D engine. So as long as developers have the ThreeJS development skills, it is very easy to build a variety of WebVR products.