aframe-cursor-teleport-component - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/aframe-cursor-teleport-component.js

@@ -40,3 +40,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
     // platform detect
-    this.mobile = AFRAME.utils.device.isMobile();
+    this.mobile =
+      AFRAME.utils.device.isMobile() ||
+      AFRAME.utils.device.isMobileDeviceRequestingDesktopSite();
 
@@ -71,2 +73,3 @@ // main app
     this.teleportIndicator = indicatorRing;
+    this.teleportIndicator.visible = false;
 
@@ -91,2 +94,3 @@ sceneEl.object3D.add(this.teleportIndicator);
     this.easeInOutQuad = this.easeInOutQuad.bind(this);
+    this.hideCursor = this.hideCursor.bind(this);
 
@@ -119,5 +123,8 @@ this.updateRaycastObjects();
     canvas.addEventListener('touchend', this.mouseUp, false);
+    window.addEventListener('keydown', this.hideCursor, false);
   },
 
   pause() {
+    this.transitioning = false;
+    this.hideCursor();
     const canvas = this.canvas;
@@ -130,2 +137,3 @@ canvas.removeEventListener('mousedown', this.mouseDown);
     canvas.removeEventListener('touchend', this.mouseUp);
+    window.removeEventListener('keydown', this.hideCursor);
   },
@@ -245,2 +253,6 @@
 
+  hideCursor() {
+    this.teleportIndicator.visible = false;
+  },
+
   mouseMove(e) {
@@ -267,2 +279,3 @@ const mouseState = this.getMouseState(e);
       if (pos) {
+        this.teleportIndicator.visible = true;
         this.teleportIndicator.position.copy(pos);
@@ -269,0 +282,0 @@ this.transition(pos);

dist/aframe-cursor-teleport-component.min.js

@@ -1,2 +0,2 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var s=e();for(var i in s)("object"==typeof exports?exports:t)[i]=s[i]}}(self,(()=>(()=>{if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");return AFRAME.registerComponent("cursor-teleport",{schema:{cameraHead:{type:"selector",default:""},cameraRig:{type:"selector",default:""},collisionEntities:{type:"string",default:""},ignoreEntities:{type:"string",default:""},landingMaxAngle:{default:45,min:0,max:360},landingNormal:{type:"vec3",default:{x:0,y:1,z:0}},transitionSpeed:{type:"number",default:6e-4}},init(){this.mobile=AFRAME.utils.device.isMobile();const t=this.el.sceneEl;this.canvas=t.renderer.domElement,this.data.cameraHead.object3D.traverse((t=>{t instanceof THREE.Camera&&(this.cam=t)})),this.camRig=this.data.cameraRig.object3D,this.rayCaster=new THREE.Raycaster,this.referenceNormal=new THREE.Vector3,this.rayCastObjects=[],this.referenceNormal.copy(this.data.landingNormal);const e=new THREE.RingGeometry(.25,.3,32,1);e.rotateX(-Math.PI/2),e.translate(0,.02,0);const s=new THREE.MeshBasicMaterial,i=new THREE.Mesh(e,s);this.teleportIndicator=i,t.object3D.add(this.teleportIndicator),this.transitioning=!1,this.transitionProgress=0,this.transitionCamPosStart=new THREE.Vector3,this.transitionCamPosEnd=new THREE.Vector3,this.updateRaycastObjects=this.updateRaycastObjects.bind(this),this.getMouseState=this.getMouseState.bind(this),this.getTeleportPosition=this.getTeleportPosition.bind(this),this.isValidNormalsAngle=this.isValidNormalsAngle.bind(this),this.transition=this.transition.bind(this),this.mouseMove=this.mouseMove.bind(this),this.mouseDown=this.mouseDown.bind(this),this.mouseUp=this.mouseUp.bind(this),this.easeInOutQuad=this.easeInOutQuad.bind(this),this.updateRaycastObjects()},remove(){this.cam=null,this.canvas=null,this.rayCastObjects.length=0,this.el.sceneEl.object3D.remove(this.teleportIndicator),this.teleportIndicator.material.dispose(),this.teleportIndicator.geometry.dispose(),this.teleportIndicator=null,this.collisionMesh&&(this.collisionMesh.geometry.dispose(),this.collisionMesh.material.dispose(),this.collisionMesh=null)},play(){const t=this.canvas;t.addEventListener("mousedown",this.mouseDown,!1),t.addEventListener("mousemove",this.mouseMove,!1),t.addEventListener("mouseup",this.mouseUp,!1),t.addEventListener("touchstart",this.mouseDown,!1),t.addEventListener("touchmove",this.mouseMove,!1),t.addEventListener("touchend",this.mouseUp,!1)},pause(){const t=this.canvas;t.removeEventListener("mousedown",this.mouseDown),t.removeEventListener("mousemove",this.mouseMove),t.removeEventListener("mouseup",this.mouseUp),t.removeEventListener("touchstart",this.mouseDown),t.removeEventListener("touchmove",this.mouseMove),t.removeEventListener("touchend",this.mouseUp)},updateRaycastObjects(){if(this.rayCastObjects.length=0,""!==this.data.collisionEntities)this.el.sceneEl.querySelectorAll(this.data.collisionEntities).forEach((t=>{t.object3D.traverse((t=>{t.isMesh&&(t.userData.collision=!0,this.rayCastObjects.push(t))}))}));else{if(!this.collisionMesh){const t=new THREE.PlaneGeometry(50,50,1);t.rotateX(-Math.PI/2);const e=new THREE.MeshNormalMaterial,s=new THREE.Mesh(t,e);s.userData.collision=!0,this.collisionMesh=s}this.rayCastObjects.push(this.collisionMesh)}""!==this.data.ignoreEntities&&this.el.sceneEl.querySelectorAll(this.data.ignoreEntities).forEach((t=>{t.object3D.traverse((t=>{t.isMesh&&this.rayCastObjects.push(t)}))}))},getMouseState:function(){const t=new THREE.Vector2;return function(e){const s=this.canvas.getBoundingClientRect();return null!=e.clientX?(t.x=e.clientX-s.left,t.y=e.clientY-s.top,t):null!=e.touches[0]?(t.x=e.touches[0].clientX-s.left,t.y=e.touches[0].clientY-s.top,t):void 0}}(),getTeleportPosition:function(){const t=new THREE.Vector2;return function(e,s){if(0!==this.rayCastObjects.length){if(this.cam&&this.canvas){const i=this.cam,o=this.canvas.getBoundingClientRect();t.x=e/(o.right-o.left)*2-1,t.y=-s/(o.bottom-o.top)*2+1,this.rayCaster.setFromCamera(t,i);const n=this.rayCaster.intersectObjects(this.rayCastObjects);return!(0===n.length||!this.isValidNormalsAngle(n[0].face.normal))&&!0===n[0].object.userData.collision&&n[0].point}return!1}return!1}}(),isValidNormalsAngle(t){const e=this.referenceNormal.angleTo(t);return THREE.MathUtils.RAD2DEG*e<=this.data.landingMaxAngle},transition(t){this.transitionProgress=0,this.transitionCamPosEnd.copy(t),this.transitionCamPosStart.copy(this.camRig.position),this.transitioning=!0},mouseMove(t){const e=this.getMouseState(t);this.mouseX=e.x,this.mouseY=e.y},mouseDown(t){this.updateRaycastObjects();const e=this.getMouseState(t);this.mouseX=e.x,this.mouseY=e.y,this.mouseXOrig=e.x,this.mouseYOrig=e.y},mouseUp(t){if(this.mouseX===this.mouseXOrig&&this.mouseY===this.mouseYOrig){const t=this.getTeleportPosition(this.mouseX,this.mouseY);t&&(this.teleportIndicator.position.copy(t),this.transition(t))}},easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,tick(t,e){if(!this.transitioning&&!this.mobile){const t=this.getTeleportPosition(this.mouseX,this.mouseY);t&&this.teleportIndicator.position.copy(t)}if(this.transitioning){this.transitionProgress+=e*this.data.transitionSpeed;const t=this.easeInOutQuad(this.transitionProgress),s=this.camRig.position;s.x=this.transitionCamPosStart.x+(this.transitionCamPosEnd.x-this.transitionCamPosStart.x)*t,s.y=this.transitionCamPosStart.y+(this.transitionCamPosEnd.y-this.transitionCamPosStart.y)*t,s.z=this.transitionCamPosStart.z+(this.transitionCamPosEnd.z-this.transitionCamPosStart.z)*t,this.transitionProgress>=1&&(this.transitioning=!1,s.copy(this.transitionCamPosEnd))}}}),{}})()));
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var s=e();for(var i in s)("object"==typeof exports?exports:t)[i]=s[i]}}(self,(()=>(()=>{if("undefined"==typeof AFRAME)throw new Error("Component attempted to register before AFRAME was available.");return AFRAME.registerComponent("cursor-teleport",{schema:{cameraHead:{type:"selector",default:""},cameraRig:{type:"selector",default:""},collisionEntities:{type:"string",default:""},ignoreEntities:{type:"string",default:""},landingMaxAngle:{default:45,min:0,max:360},landingNormal:{type:"vec3",default:{x:0,y:1,z:0}},transitionSpeed:{type:"number",default:6e-4}},init(){this.mobile=AFRAME.utils.device.isMobile()||AFRAME.utils.device.isMobileDeviceRequestingDesktopSite();const t=this.el.sceneEl;this.canvas=t.renderer.domElement,this.data.cameraHead.object3D.traverse((t=>{t instanceof THREE.Camera&&(this.cam=t)})),this.camRig=this.data.cameraRig.object3D,this.rayCaster=new THREE.Raycaster,this.referenceNormal=new THREE.Vector3,this.rayCastObjects=[],this.referenceNormal.copy(this.data.landingNormal);const e=new THREE.RingGeometry(.25,.3,32,1);e.rotateX(-Math.PI/2),e.translate(0,.02,0);const s=new THREE.MeshBasicMaterial,i=new THREE.Mesh(e,s);this.teleportIndicator=i,this.teleportIndicator.visible=!1,t.object3D.add(this.teleportIndicator),this.transitioning=!1,this.transitionProgress=0,this.transitionCamPosStart=new THREE.Vector3,this.transitionCamPosEnd=new THREE.Vector3,this.updateRaycastObjects=this.updateRaycastObjects.bind(this),this.getMouseState=this.getMouseState.bind(this),this.getTeleportPosition=this.getTeleportPosition.bind(this),this.isValidNormalsAngle=this.isValidNormalsAngle.bind(this),this.transition=this.transition.bind(this),this.mouseMove=this.mouseMove.bind(this),this.mouseDown=this.mouseDown.bind(this),this.mouseUp=this.mouseUp.bind(this),this.easeInOutQuad=this.easeInOutQuad.bind(this),this.hideCursor=this.hideCursor.bind(this),this.updateRaycastObjects()},remove(){this.cam=null,this.canvas=null,this.rayCastObjects.length=0,this.el.sceneEl.object3D.remove(this.teleportIndicator),this.teleportIndicator.material.dispose(),this.teleportIndicator.geometry.dispose(),this.teleportIndicator=null,this.collisionMesh&&(this.collisionMesh.geometry.dispose(),this.collisionMesh.material.dispose(),this.collisionMesh=null)},play(){const t=this.canvas;t.addEventListener("mousedown",this.mouseDown,!1),t.addEventListener("mousemove",this.mouseMove,!1),t.addEventListener("mouseup",this.mouseUp,!1),t.addEventListener("touchstart",this.mouseDown,!1),t.addEventListener("touchmove",this.mouseMove,!1),t.addEventListener("touchend",this.mouseUp,!1),window.addEventListener("keydown",this.hideCursor,!1)},pause(){this.transitioning=!1,this.hideCursor();const t=this.canvas;t.removeEventListener("mousedown",this.mouseDown),t.removeEventListener("mousemove",this.mouseMove),t.removeEventListener("mouseup",this.mouseUp),t.removeEventListener("touchstart",this.mouseDown),t.removeEventListener("touchmove",this.mouseMove),t.removeEventListener("touchend",this.mouseUp),window.removeEventListener("keydown",this.hideCursor)},updateRaycastObjects(){if(this.rayCastObjects.length=0,""!==this.data.collisionEntities)this.el.sceneEl.querySelectorAll(this.data.collisionEntities).forEach((t=>{t.object3D.traverse((t=>{t.isMesh&&(t.userData.collision=!0,this.rayCastObjects.push(t))}))}));else{if(!this.collisionMesh){const t=new THREE.PlaneGeometry(50,50,1);t.rotateX(-Math.PI/2);const e=new THREE.MeshNormalMaterial,s=new THREE.Mesh(t,e);s.userData.collision=!0,this.collisionMesh=s}this.rayCastObjects.push(this.collisionMesh)}""!==this.data.ignoreEntities&&this.el.sceneEl.querySelectorAll(this.data.ignoreEntities).forEach((t=>{t.object3D.traverse((t=>{t.isMesh&&this.rayCastObjects.push(t)}))}))},getMouseState:function(){const t=new THREE.Vector2;return function(e){const s=this.canvas.getBoundingClientRect();return null!=e.clientX?(t.x=e.clientX-s.left,t.y=e.clientY-s.top,t):null!=e.touches[0]?(t.x=e.touches[0].clientX-s.left,t.y=e.touches[0].clientY-s.top,t):void 0}}(),getTeleportPosition:function(){const t=new THREE.Vector2;return function(e,s){if(0!==this.rayCastObjects.length){if(this.cam&&this.canvas){const i=this.cam,o=this.canvas.getBoundingClientRect();t.x=e/(o.right-o.left)*2-1,t.y=-s/(o.bottom-o.top)*2+1,this.rayCaster.setFromCamera(t,i);const n=this.rayCaster.intersectObjects(this.rayCastObjects);return!(0===n.length||!this.isValidNormalsAngle(n[0].face.normal))&&!0===n[0].object.userData.collision&&n[0].point}return!1}return!1}}(),isValidNormalsAngle(t){const e=this.referenceNormal.angleTo(t);return THREE.MathUtils.RAD2DEG*e<=this.data.landingMaxAngle},transition(t){this.transitionProgress=0,this.transitionCamPosEnd.copy(t),this.transitionCamPosStart.copy(this.camRig.position),this.transitioning=!0},hideCursor(){this.teleportIndicator.visible=!1},mouseMove(t){const e=this.getMouseState(t);this.mouseX=e.x,this.mouseY=e.y},mouseDown(t){this.updateRaycastObjects();const e=this.getMouseState(t);this.mouseX=e.x,this.mouseY=e.y,this.mouseXOrig=e.x,this.mouseYOrig=e.y},mouseUp(t){if(this.mouseX===this.mouseXOrig&&this.mouseY===this.mouseYOrig){const t=this.getTeleportPosition(this.mouseX,this.mouseY);t&&(this.teleportIndicator.visible=!0,this.teleportIndicator.position.copy(t),this.transition(t))}},easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,tick(t,e){if(!this.transitioning&&!this.mobile){const t=this.getTeleportPosition(this.mouseX,this.mouseY);t&&this.teleportIndicator.position.copy(t)}if(this.transitioning){this.transitionProgress+=e*this.data.transitionSpeed;const t=this.easeInOutQuad(this.transitionProgress),s=this.camRig.position;s.x=this.transitionCamPosStart.x+(this.transitionCamPosEnd.x-this.transitionCamPosStart.x)*t,s.y=this.transitionCamPosStart.y+(this.transitionCamPosEnd.y-this.transitionCamPosStart.y)*t,s.z=this.transitionCamPosStart.z+(this.transitionCamPosEnd.z-this.transitionCamPosStart.z)*t,this.transitionProgress>=1&&(this.transitioning=!1,s.copy(this.transitionCamPosEnd))}}}),{}})()));
 //# sourceMappingURL=aframe-cursor-teleport-component.min.js.map

index.js

@@ -25,3 +25,5 @@ /* global AFRAME, THREE */
     // platform detect
-    this.mobile = AFRAME.utils.device.isMobile();
+    this.mobile =
+      AFRAME.utils.device.isMobile() ||
+      AFRAME.utils.device.isMobileDeviceRequestingDesktopSite();
 
@@ -56,2 +58,3 @@ // main app
     this.teleportIndicator = indicatorRing;
+    this.teleportIndicator.visible = false;
 
@@ -76,2 +79,3 @@ sceneEl.object3D.add(this.teleportIndicator);
     this.easeInOutQuad = this.easeInOutQuad.bind(this);
+    this.hideCursor = this.hideCursor.bind(this);
 
@@ -104,5 +108,8 @@ this.updateRaycastObjects();
     canvas.addEventListener('touchend', this.mouseUp, false);
+    window.addEventListener('keydown', this.hideCursor, false);
   },
 
   pause() {
+    this.transitioning = false;
+    this.hideCursor();
     const canvas = this.canvas;
@@ -115,2 +122,3 @@ canvas.removeEventListener('mousedown', this.mouseDown);
     canvas.removeEventListener('touchend', this.mouseUp);
+    window.removeEventListener('keydown', this.hideCursor);
   },
@@ -230,2 +238,6 @@
 
+  hideCursor() {
+    this.teleportIndicator.visible = false;
+  },
+
   mouseMove(e) {
@@ -252,2 +264,3 @@ const mouseState = this.getMouseState(e);
       if (pos) {
+        this.teleportIndicator.visible = true;
         this.teleportIndicator.position.copy(pos);
@@ -254,0 +267,0 @@ this.transition(pos);

package.json

 {
   "name": "aframe-cursor-teleport-component",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Simple teleport navigation for non-XR devices.",
@@ -5,0 +5,0 @@ "module": "index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13956721

increased by0.02%

Lines of code

619

increased by4.21%

No dependency changes