diff --git a/build/panolens.js b/build/panolens.js index 879bf2e9..83bb7c5b 100644 --- a/build/panolens.js +++ b/build/panolens.js @@ -4,7 +4,7 @@ (global = global || self, factory(global.PANOLENS = {}, global.THREE)); }(this, function (exports, THREE) { 'use strict'; - const version="0.11.0";const dependencies={three:"^0.105.2"}; + const version="0.12.0";const dependencies={three:"^0.105.2"}; /** * REVISION @@ -2497,7 +2497,12 @@ */ hide: function ( delay = 0 ) { - const { animated, hideAnimation, showAnimation, material } = this; + const { animated, hideAnimation, showAnimation, material, element } = this; + + if ( element ) { + const { style } = element; + style.display = 'none'; + } if ( animated ) { @@ -7420,7 +7425,7 @@ * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner * @param {number} [options.indicatorSize=30] - Size of View Indicator - * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay' + * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'. * @param {boolean} [options.autoRotate=false] - Auto rotate * @param {number} [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise. * @param {number} [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms @@ -8691,12 +8696,27 @@ const world = this.panorama.getWorldPosition( new THREE.Vector3() ); point.sub( world ).multiply( converter ); - const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`; + const position = { + x: point.x.toFixed(2), + y: point.y.toFixed(2), + z: point.z.toFixed(2), + }; + + const message = `${position.x}, ${position.y}, ${position.z}`; if ( point.length() === 0 ) { return; } switch ( this.options.output ) { + case 'event': + /** + * Dispatch raycast position as event + * @type {object} + * @event Viewer#position-output + */ + this.dispatchEvent( { type: 'position-output', position: position } ); + break; + case 'console': console.info( message ); break; @@ -8842,6 +8862,7 @@ } + const intersects = this.raycaster.intersectObjects( this.panorama.children, true ); const intersect_entity = this.getConvertedIntersect( intersects ); const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined; diff --git a/build/panolens.module.js b/build/panolens.module.js index 66a8175c..c8741a4d 100644 --- a/build/panolens.module.js +++ b/build/panolens.module.js @@ -1,6 +1,6 @@ import { Cache, Texture, RGBFormat, RGBAFormat, CubeTexture, EventDispatcher, VideoTexture, LinearFilter, SpriteMaterial, Sprite, Color, CanvasTexture, DoubleSide, Vector3, Mesh, BackSide, Object3D, SphereBufferGeometry, MeshBasicMaterial, BufferGeometry, BufferAttribute, ShaderLib, BoxBufferGeometry, ShaderMaterial, Matrix4, Vector2, Quaternion, PlaneBufferGeometry, Math as Math$1, MOUSE, PerspectiveCamera, OrthographicCamera, Euler, Scene, StereoCamera, WebGLRenderTarget, NearestFilter, WebGLRenderer, Raycaster, Frustum, REVISION as REVISION$1 } from 'three'; -const version="0.11.0";const dependencies={three:"^0.105.2"}; +const version="0.12.0";const dependencies={three:"^0.105.2"}; /** * REVISION @@ -2493,7 +2493,12 @@ Infospot.prototype = Object.assign( Object.create( Sprite.prototype ), { */ hide: function ( delay = 0 ) { - const { animated, hideAnimation, showAnimation, material } = this; + const { animated, hideAnimation, showAnimation, material, element } = this; + + if ( element ) { + const { style } = element; + style.display = 'none'; + } if ( animated ) { @@ -7416,7 +7421,7 @@ const StereoEffect = function ( renderer ) { * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner * @param {number} [options.indicatorSize=30] - Size of View Indicator - * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay' + * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'. * @param {boolean} [options.autoRotate=false] - Auto rotate * @param {number} [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise. * @param {number} [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms @@ -8687,12 +8692,27 @@ Viewer.prototype = Object.assign( Object.create( EventDispatcher.prototype ), { const world = this.panorama.getWorldPosition( new Vector3() ); point.sub( world ).multiply( converter ); - const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`; + const position = { + x: point.x.toFixed(2), + y: point.y.toFixed(2), + z: point.z.toFixed(2), + }; + + const message = `${position.x}, ${position.y}, ${position.z}`; if ( point.length() === 0 ) { return; } switch ( this.options.output ) { + case 'event': + /** + * Dispatch raycast position as event + * @type {object} + * @event Viewer#position-output + */ + this.dispatchEvent( { type: 'position-output', position: position } ); + break; + case 'console': console.info( message ); break; @@ -8838,6 +8858,7 @@ Viewer.prototype = Object.assign( Object.create( EventDispatcher.prototype ), { } + const intersects = this.raycaster.intersectObjects( this.panorama.children, true ); const intersect_entity = this.getConvertedIntersect( intersects ); const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined; diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js index 664183a7..8fa044ec 100644 --- a/src/viewer/Viewer.js +++ b/src/viewer/Viewer.js @@ -34,7 +34,7 @@ import TWEEN from '@tweenjs/tween.js'; * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner * @param {number} [options.indicatorSize=30] - Size of View Indicator - * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay' + * @param {string} [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'. * @param {boolean} [options.autoRotate=false] - Auto rotate * @param {number} [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise. * @param {number} [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms @@ -1306,12 +1306,27 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype const world = this.panorama.getWorldPosition( new THREE.Vector3() ); point.sub( world ).multiply( converter ); - const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`; + const position = { + x: point.x.toFixed(2), + y: point.y.toFixed(2), + z: point.z.toFixed(2), + }; + + const message = `${position.x}, ${position.y}, ${position.z}`; if ( point.length() === 0 ) { return; } switch ( this.options.output ) { + case 'event': + /** + * Dispatch raycast position as event + * @type {object} + * @event Viewer#position-output + */ + this.dispatchEvent( { type: 'position-output', position: position } ); + break; + case 'console': console.info( message ); break; @@ -1457,6 +1472,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype } + const intersects = this.raycaster.intersectObjects( this.panorama.children, true ); const intersect_entity = this.getConvertedIntersect( intersects ); const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined; diff --git a/test/src/viewer/Viewer.test.js b/test/src/viewer/Viewer.test.js index 1eb377f6..75bbebfd 100644 --- a/test/src/viewer/Viewer.test.js +++ b/test/src/viewer/Viewer.test.js @@ -207,6 +207,24 @@ test.cb('Output positions with mouse events - console', t => { }); +test.cb('Output positions with mouse events - event', t => { + + const viewer = new Viewer( { output: 'event' } ); + const panorama = new ImagePanorama( cabinImageURL ); + + viewer.add( panorama ); + + t.context.viewer = viewer; + t.context.end = () => { + window.dispatchEvent( keyboardUpEvent ); + t.end(); + }; + t.context.start(); + + window.dispatchEvent( keyboardDownEvent ); + +}); + test.cb('Output positions with mouse events - overlay', t => { const viewer = new Viewer( { output: 'overlay' } );