From ae9045909000215802a470c3ac379171c36c0b68 Mon Sep 17 00:00:00 2001 From: Wensheng Yan Date: Thu, 29 Jun 2017 15:06:28 -0400 Subject: [PATCH] 1. 180 video support 2. fix some bugs --- src/scripts/Components/BaseCanvas.js | 49 +++++++++++++++------------ src/scripts/Components/ThreeDVideo.js | 29 ---------------- src/scripts/Components/VR1803D.js | 42 +++++++++++++++++++++++ src/scripts/Components/VR3603D.js | 42 +++++++++++++++++++++++ src/scripts/Panorama.js | 33 +++++++++++++++--- src/scripts/types/Settings.js | 2 +- 6 files changed, 140 insertions(+), 57 deletions(-) create mode 100644 src/scripts/Components/VR1803D.js create mode 100644 src/scripts/Components/VR3603D.js diff --git a/src/scripts/Components/BaseCanvas.js b/src/scripts/Components/BaseCanvas.js index 6bec1b5..d94346a 100644 --- 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 index 7350882..a797319 100644 --- 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 new file mode 100644 index 0000000..ad89247 --- /dev/null +++ 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; \ No newline at end of file diff --git a/src/scripts/Components/VR3603D.js b/src/scripts/Components/VR3603D.js new file mode 100644 index 0000000..4068746 --- /dev/null +++ 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; \ No newline at end of file diff --git a/src/scripts/Panorama.js b/src/scripts/Panorama.js index 17fb0b2..7e12d6c 100644 --- 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 index 9a777ea..c98d229 100644 --- 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;