diff --git a/examples/180.html b/examples/180.html new file mode 100644 index 00000000..41c88ed2 --- /dev/null +++ b/examples/180.html @@ -0,0 +1,28 @@ + + + + + videojs-vr Demo + + + + + + + + + + + diff --git a/index.html b/index.html index 7de71c04..c1e33652 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@
  • Cube Video example
  • "Fluid" video size example
  • Iframe example
    • +
  • 180 VR example
    • diff --git a/samples/video_180.mp4 b/samples/video_180.mp4 new file mode 100644 index 00000000..76128460 Binary files /dev/null and b/samples/video_180.mp4 differ diff --git a/src/orbit-orientation-controls.js b/src/orbit-orientation-controls.js index dc17c242..69e4f398 100644 --- a/src/orbit-orientation-controls.js +++ b/src/orbit-orientation-controls.js @@ -55,6 +55,13 @@ class OrbitOrientationControls { if (options.orientation) { this.orientation = new DeviceOrientationControls(this.object); } + + // if projection is not full view + // limit the rotation angle in order to not display back half view + if (options.halfView) { + this.orbit.minAzimuthAngle = -Math.PI / 4; + this.orbit.maxAzimuthAngle = Math.PI / 4; + } } update() { diff --git a/src/plugin.js b/src/plugin.js index 5b2c34ca..f4f3578f 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -221,6 +221,50 @@ class VR extends Plugin { this.movieScreen.position.set(position.x, position.y, position.z); this.movieScreen.rotation.y = -Math.PI; + this.scene.add(this.movieScreen); + } else if (projection === '180') { + let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI); + + // Left eye view + geometry.scale(-1, 1, 1); + let uvs = geometry.faceVertexUvs[0]; + + for (let i = 0; i < uvs.length; i++) { + for (let j = 0; j < 3; j++) { + uvs[i][j].x *= 0.5; + } + } + + this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieMaterial = new THREE.MeshBasicMaterial({ + map: this.videoTexture, + overdraw: true + }); + this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); + // display in left eye only + this.movieScreen.layers.set(1); + this.scene.add(this.movieScreen); + + // Right eye view + geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI); + geometry.scale(-1, 1, 1); + uvs = geometry.faceVertexUvs[0]; + + for (let i = 0; i < uvs.length; i++) { + for (let j = 0; j < 3; j++) { + uvs[i][j].x *= 0.5; + uvs[i][j].x += 0.5; + } + } + + this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry); + this.movieMaterial = new THREE.MeshBasicMaterial({ + map: this.videoTexture, + overdraw: true + }); + this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial); + // display in right eye only + this.movieScreen.layers.set(2); this.scene.add(this.movieScreen); } @@ -410,7 +454,7 @@ class VR extends Plugin { // Store vector representing the direction in which the camera is looking, in world space. this.cameraVector = new THREE.Vector3(); - if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB') { + if (this.currentProjection_ === '360_LR' || this.currentProjection_ === '360_TB' || this.currentProjection_ === '180') { // Render left eye when not in VR mode this.camera.layers.enable(1); } @@ -511,6 +555,8 @@ class VR extends Plugin { const options = { camera: this.camera, canvas: this.renderedCanvas, + // check if its a half sphere view projection + halfView: this.currentProjection_ === '180', orientation: videojs.browser.IS_IOS || videojs.browser.IS_ANDROID || false }; diff --git a/src/utils.js b/src/utils.js index 1e833909..d2ae3ff6 100644 --- a/src/utils.js +++ b/src/utils.js @@ -36,7 +36,8 @@ export const validProjections = [ 'AUTO', 'Sphere', 'Cube', - 'equirectangular' + 'equirectangular', + '180' ]; export const getInternalProjectionName = function(projection) {