From a790b16638a525c9383a8c6234d0ddc9d17923a4 Mon Sep 17 00:00:00 2001 From: flyandi Date: Thu, 18 Feb 2021 23:29:56 -0800 Subject: [PATCH 1/3] Adds position debug via event --- src/viewer/Viewer.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js index 664183a7..6e475bcd 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,22 @@ 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': + this.dispatchEvent( { type: 'position-update', position: position } ); + break; + case 'console': console.info( message ); break; From 6470ced1c4a810e7e42c6c5c8de39bee97cf7efa Mon Sep 17 00:00:00 2001 From: flyandi Date: Fri, 19 Feb 2021 00:16:32 -0800 Subject: [PATCH 2/3] Updates test for new raycast event --- build/panolens.js | 29 +++++++++++++++++++++++++---- build/panolens.module.js | 29 +++++++++++++++++++++++++---- example/debug.html | 2 +- src/viewer/Viewer.js | 8 +++++++- test/src/viewer/Viewer.test.js | 18 ++++++++++++++++++ 5 files changed, 76 insertions(+), 10 deletions(-) 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/example/debug.html b/example/debug.html index 3d5bb596..e906e82d 100644 --- a/example/debug.html +++ b/example/debug.html @@ -91,7 +91,7 @@ video.link( image, new THREE.Vector3( 31.43, 1423.61, -4265.92 ) ); image.link( camera, new THREE.Vector3( -428.44, -1283.10, -4287.61 ) ); - viewer.add( camera, video, image ); + viewer.add( image ); diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js index 6e475bcd..8fa044ec 100644 --- a/src/viewer/Viewer.js +++ b/src/viewer/Viewer.js @@ -1319,7 +1319,12 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype switch ( this.options.output ) { case 'event': - this.dispatchEvent( { type: 'position-update', position: position } ); + /** + * Dispatch raycast position as event + * @type {object} + * @event Viewer#position-output + */ + this.dispatchEvent( { type: 'position-output', position: position } ); break; case 'console': @@ -1467,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' } ); From ae9d0dbdf0d76fea3f67bb934efef756e9140d82 Mon Sep 17 00:00:00 2001 From: flyandi Date: Fri, 19 Feb 2021 00:18:48 -0800 Subject: [PATCH 3/3] reset debug.html --- example/debug.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/debug.html b/example/debug.html index e906e82d..3d5bb596 100644 --- a/example/debug.html +++ b/example/debug.html @@ -91,7 +91,7 @@ video.link( image, new THREE.Vector3( 31.43, 1423.61, -4265.92 ) ); image.link( camera, new THREE.Vector3( -428.44, -1283.10, -4287.61 ) ); - viewer.add( image ); + viewer.add( camera, video, image );