Michaels big refactor ™️ (#423)

samples/examples/anchors.html

@@ -45,10 +45,6 @@
 
         <mr-div class="col-2">
 
-            <mr-button onclick="floating()" class=" label button" >
-                floating
-            </mr-button>
-
             <mr-button onclick="fixed()" class=" label button" >
                 fixed
             </mr-button>
@@ -98,13 +94,13 @@
          positions the anchored element directly in front of the user whenever an XR sessions is started.
         </mr-text>
 
-        <mr-text class="label-2 col-2">
+        <!-- <mr-text class="label-2 col-2">
         floating
         </mr-text>
 
         <mr-text class="col-2">
             allows the user to place the anchored element where they choose using a look/pinch gesture. The user can place it floating in their space or on the scene mesh
-        </mr-text>
+        </mr-text> -->
 
         <mr-text class="label-2 col-2">
         plane
@@ -293,9 +289,11 @@
             panel.components.set('anchor', {type: 'fixed'})
         }
 
+        let wallVisible = false
         function wall() {
-            wallAnchor.style.visibility = wallAnchor.style.visibility == 'hidden' ? 'visible' : 'hidden'
-            wallAnchor.components.set('anchor', {occlusion: !wallAnchor.object3D.visible})
+            wallVisible = !wallVisible
+            wallAnchor.style.visibility = wallVisible ? 'visible' : 'hidden'
+            wallAnchor.components.set('anchor', {occlusion: !wallVisible})
         }
 
         function table() {
@@ -307,9 +305,12 @@
 
         }
 
+        let ceilingVisible = false
+
         function ceiling() {
-            ceilingAnchor.style.visibility = ceilingAnchor.style.visibility == 'hidden' ? 'visible' : 'hidden'
-            ceilingAnchor.components.set('anchor', {occlusion: !ceilingAnchor.object3D.visible})
+            ceilingVisible = !ceilingVisible
+            ceilingAnchor.style.visibility = ceilingVisible ? 'visible' : 'hidden'
+            ceilingAnchor.components.set('anchor', {occlusion: !ceilingVisible})
 
         }
 
@@ -320,7 +321,7 @@
             }
         }
 
-        document.addEventListener('exitXR', () => {
+        document.addEventListener('exitxr', () => {
             reset()
         })
 

samples/examples/panels.html

@@ -178,7 +178,7 @@
 
         }
 
-        document.addEventListener('exitXR', () => {
+        document.addEventListener('exitxr', () => {
             unfolded = false 
             spread()
         })

samples/examples/skybox.html

@@ -194,15 +194,15 @@
             }
         }
 
-        document.addEventListener('enterXR', () => {
+        document.addEventListener('enterxr', () => {
             reset();
         });
 
         document.addEventListener("DOMContentLoaded", (event) => {
             reset();
         });
 
-        document.addEventListener('exitXR', () => {
+        document.addEventListener('exitxr', () => {
             reset();
         });
 

src/core/MRApp.js

@@ -449,8 +449,7 @@ export class MRApp extends MRElement {
             mrjsUtils.xr.session = this.renderer.xr.getSession();
             mrjsUtils.xr.referenceSpace = mrjsUtils.xr.getReferenceSpace();
 
-            this.dispatchEvent(new CustomEvent('enterXR', { bubbles: true }));
-            console.log('enter xr');
+            this.dispatchEvent(new CustomEvent('enterxr', { bubbles: true }));
 
             mrjsUtils.xr.session.addEventListener('end', () => {
                 this.user.position.set(0, 0, 1);
@@ -460,7 +459,7 @@ export class MRApp extends MRElement {
                 this.classList.remove('inXR');
 
                 this.onWindowResize();
-                this.dispatchEvent(new CustomEvent('exitXR', { bubbles: true }));
+                this.dispatchEvent(new CustomEvent('exitxr', { bubbles: true }));
             });
         }
 

src/core/MREntity.js

@@ -296,7 +296,7 @@ export class MREntity extends MRElement {
             });
         });
 
-        this.addEventListener('touch-start', (event) => {
+        this.addEventListener('touchstart', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
@@ -305,7 +305,7 @@ export class MREntity extends MRElement {
             }
             this.onTouch(event);
         });
-        this.addEventListener('touch', (event) => {
+        this.addEventListener('touchmove', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
@@ -314,7 +314,7 @@ export class MREntity extends MRElement {
             }
             this.onTouch(event);
         });
-        this.addEventListener('touch-end', (event) => {
+        this.addEventListener('touchend', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
@@ -323,7 +323,7 @@ export class MREntity extends MRElement {
             }
             this.onTouch(event);
         });
-        this.addEventListener('hover-start', (event) => {
+        this.addEventListener('hoverstart', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
@@ -332,7 +332,7 @@ export class MREntity extends MRElement {
             }
             this.onHover(event);
         });
-        this.addEventListener('hover-end', (event) => {
+        this.addEventListener('hoverend', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
@@ -360,15 +360,15 @@ export class MREntity extends MRElement {
             }
         });
 
-        document.addEventListener('enterXR', (event) => {
+        document.addEventListener('enterxr', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }
             if (!this.alwaysNeedsStyleUpdate) {
                 this.needsStyleUpdate = true;
             }
         });
-        document.addEventListener('exitXR', (event) => {
+        document.addEventListener('exitxr', (event) => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }

src/core/MRSystem.js

@@ -1,4 +1,5 @@
 import { MREntity } from 'mrjs/core/MREntity';
+const GLOBAL_UPDATE_EVENTS = ['enterxr', 'exitxr', 'load', 'anchored', 'panelupdate']
 
 /**
  * @class MRSystem
@@ -44,6 +45,12 @@ export class MRSystem {
             this.onNewEntity(event.target);
         });
 
+        for(const eventType of GLOBAL_UPDATE_EVENTS) {
+            document.addEventListener(eventType, (event) => {
+                this.eventUpdate()
+            });
+        }
+
         const entities = document.querySelectorAll(`[${this.componentName}]`);
         for (const entity of entities) {
             if (!(entity instanceof MREntity)) {
@@ -130,6 +137,14 @@ export class MRSystem {
      */
     update(deltaTime, frame) {}
 
+    /**
+     * @function
+     * @description An event triggered update, called when any scene level events occur.
+     */
+    eventUpdate() {
+
+    }
+
     /**
      * @function
      * @description Called when a new entity is added to the scene

src/core/MRTextEntity.js

@@ -27,7 +27,7 @@ export class MRTextEntity extends MRDivEntity {
 
         // This event listener is added so anytime a panel changes (resize, etc), the text changes
         // accordingly
-        document.addEventListener('panel-mutated', () => {
+        document.addEventListener('panelupdate', () => {
             if (!this.alwaysNeedsGeometryUpdate) {
                 this.needsGeometryUpdate = true;
             }

src/core/componentSystems/AnchorSystem.js

@@ -22,7 +22,7 @@ export class AnchorSystem extends MRSystem {
         this.currentEntity = null;
         this.tempMatrix = new THREE.Matrix4();
 
-        this.planeManager = new MRPlaneManager(this.app.scene, this.app.physicsWorld);
+        this.planeManager = new MRPlaneManager(this.app.scene, this.app.physicsWorld, this.app.getAttribute('occlusion'));
         this.anchoringQueue = new Set();
 
         this.hitResults;
@@ -41,12 +41,14 @@ export class AnchorSystem extends MRSystem {
 
         let existing = document.querySelectorAll('[data-comp-anchor]');
 
+        this.originPosition = new THREE.Vector3()
+
         for (const entity of existing) {
             this.attachedComponent(entity);
             this.registry.add(entity);
         }
 
-        this.app.addEventListener('enterXR', () => {
+        this.app.addEventListener('enterxr', () => {
             if (this.sourceRequest == false) {
                 mrjsUtils.xr.session.requestReferenceSpace('viewer').then((viewerSpace) => {
                     mrjsUtils.xr.session.requestHitTestSource({ space: viewerSpace }).then((source) => {
@@ -64,7 +66,7 @@ export class AnchorSystem extends MRSystem {
             }
         });
 
-        this.app.addEventListener('exitXR', () => {
+        this.app.addEventListener('exitxr', () => {
             this.deleteAnchor(this.app)
             this.app.origin.matrix.copy(new THREE.Matrix4())
         });
@@ -98,7 +100,6 @@ export class AnchorSystem extends MRSystem {
             mrjsUtils.xr.session.requestAnimationFrame((t, frame) => {
                 frame.createAnchor(this.matrix4ToXRRigidTransform(this.currentEntity.object3D.matrixWorld), mrjsUtils.xr.referenceSpace).then(
                     (anchor) => {
-                        console.log('anchored floating');
                         this.currentEntity.anchor = anchor;
                         this.anchoringQueue.delete(this.currentEntity);
                         this.currentEntity = null;
@@ -157,13 +158,16 @@ export class AnchorSystem extends MRSystem {
             if (mrjsUtils.xr.isPresenting) {
                 let anchorComp = entity.components.get('anchor');
                 if (entity.anchor == null && !this.anchoringQueue.has(entity)) {
-                    entity.object3D.matrixAutoUpdate = false;
+                    entity.object3D.matrixWorldAutoUpdate = false;
                     this.createAnchor(entity, anchorComp);
                 } else if (entity.anchor) {
                     let pose = frame.getPose(entity.anchor.anchorSpace, mrjsUtils.xr.referenceSpace);
                     let transform = this.multiplyQuaternionWithXRRigidTransform(this.axisSwapQuat, pose.transform);
 
-                    entity.object3D.matrixWorld.copy(this.adjustTransform(transform));
+                    entity.object3D.matrix.copy(this.adjustTransform(transform));
+
+                } else {
+                    this.createAnchor(entity, anchorComp);
                 }
             } else if (entity.anchor) {
                 entity.object3D.matrix.copy(entity.object3D.userData.originalMatrix);
@@ -214,7 +218,7 @@ export class AnchorSystem extends MRSystem {
             entity.plane = null;
         }
         entity.anchor = null;
-        entity.dispatchEvent(new CustomEvent('anchor-removed', { bubbles: true }));
+        entity.dispatchEvent(new CustomEvent('anchorremoved', { bubbles: true }));
     }
 
     /**
@@ -244,8 +248,10 @@ export class AnchorSystem extends MRSystem {
         if (!mrjsUtils.xr.isPresenting) {
             return;
         }
+        let originMatrix = new THREE.Matrix4()
         mrjsUtils.xr.session.requestAnimationFrame((t, frame) => {
-            frame.createAnchor(this.matrix4ToXRRigidTransform(this.app.forward.matrixWorld), mrjsUtils.xr.referenceSpace).then(
+            originMatrix.copyPosition(this.app.forward.matrixWorld)
+            frame.createAnchor(this.matrix4ToXRRigidTransform(originMatrix), mrjsUtils.xr.referenceSpace).then(
                 (anchor) => {
                     this.app.origin.matrixAutoUpdate = false;
                     this.app.anchor = anchor;
@@ -262,8 +268,9 @@ export class AnchorSystem extends MRSystem {
         let pose = frame.getPose(this.app.anchor.anchorSpace, mrjsUtils.xr.referenceSpace);
         let transform = this.multiplyQuaternionWithXRRigidTransform(this.axisSwapQuat, pose.transform);
 
-        this.app.origin.matrix.copy(this.adjustTransform(transform));
+        this.app.origin.matrix.copy(this.adjustTransform(transform, true));
 
+        this.originPosition.setFromMatrixPosition(this.app.origin.matrixWorld)
     }
 
     /**
@@ -314,12 +321,9 @@ export class AnchorSystem extends MRSystem {
      * @param comp
      */
     plane(entity, comp) {
-        if (this.planeManager.currentPlanes.size == 0) {
-            return;
-        }
         this.anchoringQueue.add(entity);
         this.userWorldPosition.setFromMatrixPosition(this.app.forward.matrixWorld);
-        let sort = Array.from(this.planeManager.currentPlanes.values());
+        let sort = Array.from(this.planeManager.planeDictionary[comp.label].values());
         sort.sort((a, b) => {
             return a.mesh.position.distanceTo(this.userWorldPosition) - b.mesh.position.distanceTo(this.userWorldPosition);
         });
@@ -339,10 +343,13 @@ export class AnchorSystem extends MRSystem {
                 frame.createAnchor(this.matrix4ToXRRigidTransform(mrPlane.mesh.matrixWorld), mrjsUtils.xr.referenceSpace).then(
                     (anchor) => {
                         this.anchoringQueue.delete(entity);
+                        if(!this.planeManager.planeDictionary[comp.label].has(mrPlane)) {
+                            return 
+                        }
+                        if(entity.anchor) { return }
                         entity.anchor = anchor;
                         entity.plane = mrPlane;
                         entity.dispatchEvent(new CustomEvent('anchored', { bubbles: true }));
-
                         if (comp.occlusion == false) {
                             mrPlane.mesh.visible = false;
                         }
@@ -352,7 +359,7 @@ export class AnchorSystem extends MRSystem {
                     }
                 );
             });
-            return;
+            return
         }
     }
 
@@ -368,7 +375,7 @@ export class AnchorSystem extends MRSystem {
      * @param xrRigidTransform
      * @returns a THREE.js Matrix4
      */
-    adjustTransform(xrRigidTransform) {
+    adjustTransform(xrRigidTransform, origin = false) {
         // Create a Three.js Quaternion for the XRRigidTransform's orientation
         let quaternion = new THREE.Quaternion(xrRigidTransform.orientation.x, xrRigidTransform.orientation.y, xrRigidTransform.orientation.z, xrRigidTransform.orientation.w);
 
@@ -387,6 +394,10 @@ export class AnchorSystem extends MRSystem {
         // Create a new Three.js Vector3 for the position
         let position = new THREE.Vector3(xrRigidTransform.position.x, xrRigidTransform.position.y, xrRigidTransform.position.z);
 
+        if(!origin) {
+            position.sub(this.originPosition)
+        }
+
         this.originalAnchorMatrix.compose(position, quaternion, new THREE.Vector3(1, 1, 1));
         this.rotationMatrix.extractRotation(this.originalAnchorMatrix);