Skip to content
This repository has been archived by the owner on Jun 2, 2023. It is now read-only.

Commit

Permalink
Refactor and move actions into menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@pchen66
pchen66 committed Jul 8, 2016
1 parent 75d9be4 commit 4c903a6
Show file tree
Hide file tree
Showing 5 changed files with 673 additions and 161 deletions.
5 changes: 4 additions & 1 deletion src/DataImage.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 7 additions & 4 deletions src/Modes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@
*/
PANOLENS.Modes = {

/** Current viewer state is unknown */
/** Unknown */
UNKNOWN: 0,

/** Current viewer state is normal */
/** Normal */
NORMAL: 1,

/** Current viewer state is in vr mode*/
VR: 2
/** Google Cardboard*/
CARDBOARD: 2,

/** Stereoscopic **/
STEREO: 3

};

Expand Down
16 changes: 8 additions & 8 deletions src/infospot/Infospot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
this.addEventListener( 'hover', this.onHover );
this.addEventListener( 'hoverenter', this.onHoverStart );
this.addEventListener( 'hoverleave', this.onHoverEnd );
this.addEventListener( 'VR-toggle', this.onToggleVR );
this.addEventListener( 'panolens-dual-eye-effect', this.onDualEyeEffect );
this.addEventListener( 'panolens-container', this.setContainer.bind( this ) );
this.addEventListener( 'dismiss', this.onDismiss );
this.addEventListener( 'panolens-infospot-focus', this.setFocusMethod );
Expand Down Expand Up @@ -201,7 +201,7 @@

if ( !this.getContainer() ) { return; }

var cursorStyle = this.cursorStyle || ( this.mode === PANOLENS.Modes.VR ? 'default' : 'pointer' );
var cursorStyle = this.cursorStyle || ( this.mode === PANOLENS.Modes.NORMAL ? 'pointer' : 'default' );

this.isHovering = true;
this.container.style.cursor = cursorStyle;
Expand All @@ -215,7 +215,7 @@

if ( this.element ) {

if ( this.mode === PANOLENS.Modes.VR ) {
if ( this.mode === PANOLENS.Modes.CARDBOARD ||this.mode === PANOLENS.Modes.STEREO ) {

this.element.style.display = 'none';
this.element.left && ( this.element.left.style.display = 'block' );
Expand Down Expand Up @@ -274,11 +274,11 @@
};

/**
* On VR toggle handler
* On dual eye effect handler
* Creates duplicate left and right element
* @param {object} event - VR toggle event
* @param {object} event - panolens-dual-eye-effect event
*/
PANOLENS.Infospot.prototype.onToggleVR = function ( event ) {
PANOLENS.Infospot.prototype.onDualEyeEffect = function ( event ) {

if ( !this.getContainer() ) { return; }

Expand All @@ -304,7 +304,7 @@

}

if ( this.mode === PANOLENS.Modes.VR ) {
if ( this.mode === PANOLENS.Modes.CARDBOARD || this.mode === PANOLENS.Modes.STEREO ) {

element.left.style.display = element.style.display;
element.right.style.display = element.style.display;
Expand Down Expand Up @@ -350,7 +350,7 @@
left = x - width - container.offsetLeft;
top = y - height - delta;

if ( this.mode === PANOLENS.Modes.VR && element.left && element.right ) {
if ( ( this.mode === PANOLENS.Modes.CARDBOARD || this.mode === PANOLENS.Modes.STEREO ) && element.left && element.right ) {

left = container.clientWidth / 4 - width;
top = container.clientHeight / 2 - height - delta;
Expand Down
165 changes: 101 additions & 64 deletions src/viewer/Viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
* @param {THREE.Camera} [options.camera=THREE.PerspectiveCamera] - A THREE.Camera to view the scene
* @param {THREE.WebGLRenderer} [options.renderer=THREE.WebGLRenderer] - A THREE.WebGLRenderer to render canvas
* @param {boolean} [options.controlBar=true] - Show/hide control bar on the bottom of the container
* @param {array} [options.controlButtons=[]] - Button names to mount on controlBar if controlBar exists, Defaults to ['fullscreen', 'navigation', 'vr', 'video']
* @param {array} [options.controlButtons=[]] - Button names to mount on controlBar if controlBar exists, Defaults to ['fullscreen', 'setting', 'video']
* @param {boolean} [options.autoHideControlBar=false] - Auto hide control bar when click on non-active area
* @param {boolean} [options.autoHideInfospot=true] - Auto hide infospots when click on non-active area
* @param {boolean} [options.horizontalView=false] - Allow only horizontal camera control
Expand All @@ -38,7 +38,7 @@

options = options || {};
options.controlBar = options.controlBar !== undefined ? options.controlBar : true;
options.controlButtons = options.controlButtons || [ 'fullscreen', 'navigation', 'vr', 'video' ];
options.controlButtons = options.controlButtons || [ 'fullscreen', 'setting', 'video' ];
options.autoHideControlBar = options.autoHideControlBar !== undefined ? options.autoHideControlBar : false;
options.autoHideInfospot = options.autoHideInfospot !== undefined ? options.autoHideInfospot : true;
options.horizontalView = options.horizontalView !== undefined ? options.horizontalView : false;
Expand Down Expand Up @@ -83,7 +83,6 @@
this.camera = options.camera || new THREE.PerspectiveCamera( this.options.cameraFov, this.container.clientWidth / this.container.clientHeight, 1, 10000 );
this.scene = options.scene || new THREE.Scene();
this.renderer = options.renderer || new THREE.WebGLRenderer( { alpha: true, antialias: true } );
this.effect;

this.reticle = {};
this.tempEnableReticle = this.options.enableReticle;
Expand All @@ -93,7 +92,11 @@
this.OrbitControls;
this.DeviceOrientationControls;

this.CardboardEffect;
this.StereoEffect;

this.controls;
this.effect;
this.panorama;
this.widget;

Expand Down Expand Up @@ -154,13 +157,20 @@

}

// Cardboard effect
this.effect = new THREE.CardboardEffect( this.renderer );
this.effect.setSize( this.container.clientWidth, this.container.clientHeight );

// Controls
this.controls = [ this.OrbitControls, this.DeviceOrientationControls ];
this.control = this.OrbitControls;

// Cardboard effect
this.CardboardEffect = new THREE.CardboardEffect( this.renderer );
this.CardboardEffect.setSize( this.container.clientWidth, this.container.clientHeight );

// Stereo effect
this.StereoEffect = new THREE.StereoEffect( this.renderer );
this.StereoEffect.setSize( this.container.clientWidth, this.container.clientHeight );

this.effect = this.CardboardEffect;

// Add default hidden reticle
this.addReticle();

Expand Down Expand Up @@ -332,102 +342,129 @@
};

/**
* Toggle VR effect mode and broadcast event to infospot descendants
* @fires PANOLENS.Viewer#VR-toggle
* @fires PANOLENS.Infospot#VR-toggle
* Dispatch event to all descendants
* @param {object} event - Event to be passed along
*/
PANOLENS.Viewer.prototype.toggleVR = function () {
PANOLENS.Viewer.prototype.dispatchEventToChildren = function ( event ) {

var event;
this.scene.traverse( function ( object ) {

if ( this.effect ) {
if ( object.dispatchEvent ) {

if ( this.mode !== PANOLENS.Modes.VR ) {
object.dispatchEvent( event );

this.mode = PANOLENS.Modes.VR;
}

});

} else {
};

this.mode = PANOLENS.Modes.NORMAL;
/**
* Disable additional rendering effect
*/
PANOLENS.Viewer.prototype.disableEffect = function () {

}
}
if ( this.mode === PANOLENS.Modes.NORMAL ) { return; }

event = { type: 'VR-toggle', mode: this.mode };
this.mode = PANOLENS.Modes.NORMAL;
this.disableReticleControl();

/**
* Toggle vr event
* Dual eye effect event
* @type {object}
* @event PANOLENS.Viewer#VR-toggle
* @event PANOLENS.Infospot#VR-toggle
* @event PANOLENS.Viewer#panolens-dual-eye-effect
* @event PANOLENS.Infospot#panolens-dual-eye-effect
* @property {PANOLENS.Modes} mode - Current display mode
*/
this.dispatchEvent( event );
this.scene.traverse( function ( object ) {
this.dispatchEventToChildren( { type: 'panolens-dual-eye-effect', mode: this.mode } );

if ( object.dispatchEvent ) {

object.dispatchEvent( event );
this.renderer.setSize( this.container.clientWidth, this.container.clientHeight );
this.render();
};

}
/**
* Enable rendering effect
* @param {PANOLENS.Modes} mode - Modes for effects
*/
PANOLENS.Viewer.prototype.enableEffect = function ( mode ) {

});
if ( this.mode === mode ) { return; }

if ( this.mode === PANOLENS.Modes.VR ) {
var fov = this.camera.fov;

this.enableVR();
this.mode = mode;

} else {
switch( mode ) {

this.disableVR();
case PANOLENS.Modes.CARDBOARD:

}
this.effect = this.CardboardEffect;
this.enableReticleControl();

};
break;

/**
* Enable VR effect
*/
PANOLENS.Viewer.prototype.enableVR = function () {
case PANOLENS.Modes.STEREO:

if ( this.effect && this.mode === PANOLENS.Modes.VR ) {
this.effect = this.StereoEffect;
this.enableReticleControl();

break;

this.tempEnableReticle = true;
default:

// Register reticle event and unregister mouse event
this.unregisterMouseAndTouchEvents();
return;

this.reticle.show();
this.registerReticleEvent();
}

this.updateReticleEvent( this.mode );

/**
* Dual eye effect event
* @type {object}
* @event PANOLENS.Viewer#panolens-dual-eye-effect
* @event PANOLENS.Infospot#panolens-dual-eye-effect
* @property {PANOLENS.Modes} mode - Current display mode
*/
this.dispatchEventToChildren( { type: 'panolens-dual-eye-effect', mode: mode } );

}
// Force effect stereo camera to update by refreshing fov
this.camera.fov = fov + 10e-3;
this.effect.setSize( this.container.clientWidth, this.container.clientHeight );
this.render();
this.camera.fov = fov;

};

/**
* Disable VR effect
* Enable reticle control
*/
PANOLENS.Viewer.prototype.disableVR = function () {
PANOLENS.Viewer.prototype.enableReticleControl = function () {

this.tempEnableReticle = true;

if ( this.effect && this.mode === PANOLENS.Modes.NORMAL ) {
// Register reticle event and unregister mouse event
this.unregisterMouseAndTouchEvents();
this.reticle.show();
this.registerReticleEvent();
this.updateReticleEvent();

this.tempEnableReticle = false;
};

// Register mouse event and unregister reticle event
if ( !this.options.enableReticle ) {
/**
* Disable reticle control
*/
PANOLENS.Viewer.prototype.disableReticleControl = function () {

this.reticle.hide();
this.unregisterReticleEvent();
this.registerMouseAndTouchEvents();
this.tempEnableReticle = false;

} else {
// Register mouse event and unregister reticle event
if ( !this.options.enableReticle ) {

this.updateReticleEvent( this.mode );
this.reticle.hide();
this.unregisterReticleEvent();
this.registerMouseAndTouchEvents();

}
} else {

this.updateReticleEvent();

}

Expand Down Expand Up @@ -910,7 +947,7 @@
// Update reticle
if ( this.options.enableReticle || this.tempEnableReticle ) {

this.updateReticleEvent( this.mode );
this.updateReticleEvent();

}

Expand Down Expand Up @@ -1312,7 +1349,7 @@
*/
PANOLENS.Viewer.prototype.render = function () {

if ( this.mode === PANOLENS.Modes.VR ) {
if ( this.mode === PANOLENS.Modes.CARDBOARD || this.mode === PANOLENS.Modes.STEREO ) {

this.effect.render( this.scene, this.camera );

Expand Down Expand Up @@ -1412,7 +1449,7 @@
/**
* Update reticle event
*/
PANOLENS.Viewer.prototype.updateReticleEvent = function ( mode ) {
PANOLENS.Viewer.prototype.updateReticleEvent = function () {

var centerX, centerY;

Expand Down
Loading

0 comments on commit 4c903a6

Please sign in to comment.