1. 180 video support

2. fix some bugs
yanwsh · Jun 29, 2017 · ae90459 · ae90459
1 parent 4e9604d
commit ae90459
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 57 deletions.
diff --git a/src/scripts/Components/BaseCanvas.js b/src/scripts/Components/BaseCanvas.js
@@ -233,25 +233,26 @@ class BaseCanvas extends Component{
                     this._lat = ( clientY - this._mouseDownPointer.y ) * 0.2 + this._mouseDownLocation.Lat;
                     this._accelector.x = 0;
                     this._accelector.y = 0;
-                }else{
-                    var rect = this.el().getBoundingClientRect();
-                    const x = clientX - this._width / 2 - rect.left;
-                    const y = this._height / 2 - (clientY - rect.top);
-                    let angle = 0;
-                    if(x === 0){
-                        angle = (y > 0)? Math.PI / 2 : Math.PI * 3 / 2;
-                    }else if(x > 0 && y > 0){
-                        angle = Math.atan(y / x);
-                    }else if(x > 0 && y < 0){
-                        angle = 2 * Math.PI - Math.atan(y * -1 / x);
-                    }else if(x < 0 && y > 0){
-                        angle = Math.PI - Math.atan(y / x * -1);
-                    }else {
-                        angle = Math.PI + Math.atan(y / x);
-                    }
-                    this._accelector.x = Math.cos(angle) * this.options.movingSpeed.x * Math.abs(x);
-                    this._accelector.y = Math.sin(angle) * this.options.movingSpeed.y * Math.abs(y);
                 }
+                //do nothing if mouse down is not detected.
+            }else{
+                var rect = this.el().getBoundingClientRect();
+                const x = clientX - this._width / 2 - rect.left;
+                const y = this._height / 2 - (clientY - rect.top);
+                let angle = 0;
+                if(x === 0){
+                    angle = (y > 0)? Math.PI / 2 : Math.PI * 3 / 2;
+                }else if(x > 0 && y > 0){
+                    angle = Math.atan(y / x);
+                }else if(x > 0 && y < 0){
+                    angle = 2 * Math.PI - Math.atan(y * -1 / x);
+                }else if(x < 0 && y > 0){
+                    angle = Math.PI - Math.atan(y / x * -1);
+                }else {
+                    angle = Math.PI + Math.atan(y / x);
+                }
+                this._accelector.x = Math.cos(angle) * this.options.movingSpeed.x * Math.abs(x);
+                this._accelector.y = Math.sin(angle) * this.options.movingSpeed.y * Math.abs(y);
             }
         }
     }
@@ -384,11 +385,15 @@ class BaseCanvas extends Component{
             this._lat += this._accelector.y;
             this._lon += this._accelector.x;
         }
-        if(this._lon > 360){
-            this._lon -= 360;
-        }else if(this._lon < 0){
-            this._lon += 360;
+
+        if(this._options.minLon === 0 && this._options.maxLon === 360){
+            if(this._lon > 360){
+                this._lon -= 360;
+            }else if(this._lon < 0){
+                this._lon += 360;
+            }
         }
+
         this._lat = Math.max( this.options.minLat, Math.min( this.options.maxLat, this._lat ) );
         this._lon = Math.max( this.options.minLon, Math.min( this.options.maxLon, this._lon ) );
         this._phi = THREE.Math.degToRad( 90 - this._lat );

diff --git a/src/scripts/Components/ThreeDVideo.js b/src/scripts/Components/ThreeDVideo.js
@@ -25,35 +25,6 @@ class ThreeDVideo extends BaseCanvas{
         this._cameraR = new THREE.PerspectiveCamera(this.options.initFov, aspectRatio / 2, 1, 2000);
         this._cameraR.position.set( 1000, 0, 0 );
         this._cameraR.target = new THREE.Vector3( 1000, 0, 0 );
-
-        let geometryL = new THREE.SphereBufferGeometry(500, 60, 40).toNonIndexed();
-        let geometryR = new THREE.SphereBufferGeometry(500, 60, 40).toNonIndexed();
-
-        let uvsL = geometryL.attributes.uv.array;
-        let normalsL = geometryL.attributes.normal.array;
-        for ( let i = 0; i < normalsL.length / 3; i ++ ) {
-            uvsL[ i * 2 + 1 ] = uvsL[ i * 2 + 1 ] / 2;
-        }
-
-        let uvsR = geometryR.attributes.uv.array;
-        let normalsR = geometryR.attributes.normal.array;
-        for ( let i = 0; i < normalsR.length / 3; i ++ ) {
-            uvsR[ i * 2 + 1 ] = uvsR[ i * 2 + 1 ] / 2 + 0.5;
-        }
-
-        geometryL.scale( - 1, 1, 1 );
-        geometryR.scale( - 1, 1, 1 );
-
-        this._meshL = new THREE.Mesh(geometryL,
-            new THREE.MeshBasicMaterial({ map: this._texture})
-        );
-
-        this._meshR = new THREE.Mesh(geometryR,
-            new THREE.MeshBasicMaterial({ map: this._texture})
-        );
-        this._meshR.position.set(1000, 0, 0);
-
-        this._scene.add(this._meshL);
     }
 
     handleResize(): void{

diff --git a/src/scripts/Components/VR1803D.js b/src/scripts/Components/VR1803D.js
@@ -0,0 +1,42 @@
+// @flow
+
+import type { Player, Settings } from '../types';
+import ThreeDVideo from './ThreeDVideo';
+import THREE from "three";
+
+class VR1803D extends ThreeDVideo{
+    constructor(player: Player, options: Settings, renderElement: HTMLElement){
+        super(player, options, renderElement);
+
+        let geometryL = new THREE.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();
+        let geometryR = new THREE.SphereBufferGeometry(500, 60, 40, 0, Math.PI).toNonIndexed();
+
+        let uvsL = geometryL.attributes.uv.array;
+        let normalsL = geometryL.attributes.normal.array;
+        for ( let i = 0; i < normalsL.length / 3; i ++ ) {
+            uvsL[ i * 2 ] = uvsL[ i * 2 ] / 2;
+        }
+
+        let uvsR = geometryR.attributes.uv.array;
+        let normalsR = geometryR.attributes.normal.array;
+        for ( let i = 0; i < normalsR.length / 3; i ++ ) {
+            uvsR[ i * 2 ] = uvsR[ i * 2 ] / 2 + 0.5;
+        }
+
+        geometryL.scale( - 1, 1, 1 );
+        geometryR.scale( - 1, 1, 1 );
+
+        this._meshL = new THREE.Mesh(geometryL,
+            new THREE.MeshBasicMaterial({ map: this._texture})
+        );
+
+        this._meshR = new THREE.Mesh(geometryR,
+            new THREE.MeshBasicMaterial({ map: this._texture})
+        );
+        this._meshR.position.set(1000, 0, 0);
+
+        this._scene.add(this._meshL);
+    }
+}
+
+export default VR1803D;
diff --git a/src/scripts/Components/VR3603D.js b/src/scripts/Components/VR3603D.js
@@ -0,0 +1,42 @@
+// @flow
+
+import type { Player, Settings } from '../types';
+import ThreeDVideo from './ThreeDVideo';
+import THREE from "three";
+
+class VR3603D extends ThreeDVideo{
+    constructor(player: Player, options: Settings, renderElement: HTMLElement){
+        super(player, options, renderElement);
+
+        let geometryL = new THREE.SphereBufferGeometry(500, 60, 40).toNonIndexed();
+        let geometryR = new THREE.SphereBufferGeometry(500, 60, 40).toNonIndexed();
+
+        let uvsL = geometryL.attributes.uv.array;
+        let normalsL = geometryL.attributes.normal.array;
+        for ( let i = 0; i < normalsL.length / 3; i ++ ) {
+            uvsL[ i * 2 + 1 ] = uvsL[ i * 2 + 1 ] / 2;
+        }
+
+        let uvsR = geometryR.attributes.uv.array;
+        let normalsR = geometryR.attributes.normal.array;
+        for ( let i = 0; i < normalsR.length / 3; i ++ ) {
+            uvsR[ i * 2 + 1 ] = uvsR[ i * 2 + 1 ] / 2 + 0.5;
+        }
+
+        geometryL.scale( - 1, 1, 1 );
+        geometryR.scale( - 1, 1, 1 );
+
+        this._meshL = new THREE.Mesh(geometryL,
+            new THREE.MeshBasicMaterial({ map: this._texture})
+        );
+
+        this._meshR = new THREE.Mesh(geometryR,
+            new THREE.MeshBasicMaterial({ map: this._texture})
+        );
+        this._meshR.position.set(1000, 0, 0);
+
+        this._scene.add(this._meshL);
+    }
+}
+
+export default VR3603D;
diff --git a/src/scripts/Panorama.js b/src/scripts/Panorama.js
@@ -7,7 +7,8 @@ import EventEmitter from 'wolfy87-eventemitter';
 import Equirectangular from './Components/Equirectangular';
 import Fisheye from './Components/Fisheye';
 import DualFisheye from './Components/DualFisheye';
-import ThreeDVideo from './Components/ThreeDVideo';
+import VR3603D from './Components/VR3603D';
+import VR1803D from './Components/VR1803D';
 import Notification from './Components/Notification';
 import Thumbnail from './Components/Thumbnail';
 import VRButton from './Components/VRButton';
@@ -16,7 +17,7 @@ import { Detector, webGLErrorMessage, crossDomainWarning, transitionEvent, merge
 
 const runOnMobile = mobileAndTabletcheck();
 
-const videoTypes = ["equirectangular", "fisheye", "3dVideo", "dual_fisheye"];
+const videoTypes = ["equirectangular", "fisheye", "dual_fisheye", "VR1803D", "VR3603D"];
 
 export const defaults: Settings = {
     videoType: "equirectangular",
@@ -99,6 +100,18 @@ export const defaults: Settings = {
     Markers: false
 };
 
+export const VR180Defaults: any = {
+    //initial position for the video
+    initLat: 0,
+    initLon: 90,
+    //limit viewable zoom
+    minLat: -75,
+    maxLat: 55,
+
+    minLon: 50,
+    maxLon: 130,
+};
+
 /**
  * panorama controller class which control required components
  */
@@ -114,7 +127,11 @@ class Panorama extends EventEmitter{
      * @returns {*} the latest version which we use.
      */
     static checkOptions(options: Settings): void {
-        if(options.videoType && videoTypes.indexOf(options.videoType) === -1){
+        if(options.videoType === "3dVideo"){
+            warning(`videoType: ${String(options.videoType)} is deprecated, please use VR3603D`);
+            options.videoType = "VR3603D";
+        }
+        else if(options.videoType && videoTypes.indexOf(options.videoType) === -1){
             warning(`videoType: ${String(options.videoType)} is not supported, set video type to ${String(defaults.videoType)}.`);
             options.videoType = defaults.videoType;
         }
@@ -198,8 +215,11 @@ class Panorama extends EventEmitter{
             case "dual_fisheye":
                 VideoClass = DualFisheye;
                 break;
-            case "3dVideo":
-                VideoClass = ThreeDVideo;
+            case "VR3603D":
+                VideoClass = VR3603D;
+                break;
+            case "VR1803D":
+                VideoClass = VR1803D;
                 break;
             default:
                 VideoClass = Equirectangular;
@@ -210,6 +230,9 @@ class Panorama extends EventEmitter{
     constructor(player: Player, options: any = {}){
         super();
         Panorama.checkOptions(options);
+        if(options.videoType === "VR1803D"){
+            options = mergeOptions({}, VR180Defaults, options);
+        }
         this._options = mergeOptions({}, defaults, options);
         this._player = player;
 

diff --git a/src/scripts/types/Settings.js b/src/scripts/types/Settings.js
@@ -1,7 +1,7 @@
 // @flow
 import { Point, Coordinates } from './Point';
 
-export type VideoTypes = "equirectangular" | "fisheye" | "3dVideo" | "dual_fisheye";
+export type VideoTypes = "equirectangular" | "fisheye"  | "dual_fisheye" | "VR1803D" | "VR3603D";
 
 export type MarkerSettings = {
     location: Coordinates;