Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	aframe/build/aframe-ar-nft.mjs
#	aframe/build/aframe-ar.mjs

Author: kalwalt

.github/workflows/build.yml

@@ -12,6 +12,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          ssh-key: ${{ secrets.DEPLOY_KEY }}
 
       - name: Use Node.js from .nvmrc
         uses: actions/setup-node@v4

.prettierignore

@@ -4,13 +4,15 @@ node_modules/**
 test/**
 aframe/examples/**
 aframe/build/*.js
+aframe/build/*.mjs
 aframe/src/component-anchor.js
 aframe/src/component-anchor-nft.js
 aframe/src/system-arjs.js
 aframe/src/system-arjs-nft.js
 aframe/src/location-based/stylesheets/*.css
 three.js/examples/**
 three.js/build/*.js
+three.js/build/*.mjs
 three.js/src/location-based/README.md
 *.md
 webpack.config.js

README.md

@@ -221,6 +221,31 @@ npm install @ar-js-org/ar.js
 yarn add @ar-js-org/ar.js
 ```
 For some examples read this [issue](https://github.com/AR-js-org/AR.js/issues/234).
+### New Import Syntax for `ar-threex.mjs` and `ar.mjs`
+
+With the latest updates (3.4.6), `three.js` can now be imported using the ES module syntax. 
+To align with this standard, `ar-threex.mjs`,`ar.mjs` and `ar-threex-location-only.mjs` should also be imported in the same way using an import map. Here is an example of how to import these modules in your project:
+
+```html
+// Example importing ar-threex.mjs
+<script type="importmap">
+{
+  "imports": {
+    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+    "threex": "./path/to/ar-threex.mjs",
+  }
+}
+</script>
+
+<script type="module">
+import * as THREE from 'three';
+import { ArToolkitSource, ArToolkitContext, ArMarkerControls }  from 'threex'
+
+// Your AR.js code here
+</script>
+```
+Read the examples included in this repository for more information, but basically the only change is the import syntax.
+
 ## Troubleshooting, feature requests, community
 
 **You can find a lot of help on the old [AR.js repositories issues](https://github.com/jeromeetienne/AR.js/issues). Please search on open/closed issues, you may find interesting stuff.**

aframe/build/aframe-ar-location-only.module.js renamed to aframe/build/aframe-ar-location-only.mjs

@@ -22,7 +22,7 @@
 Use the third-party A-Frame 'look-at' component to make the text look at the
 camera.
 -->
-	<a-text value='This will always face the user.' look-at='[gps-new-camera]' gps-new-entity-place="latitude: 51.05; longitude: -0.723" scale="50 50 50"></a-entity>
+	<a-text value='This will always face the user.' look-at='[gps-new-camera]' gps-new-entity-place="latitude: 51.05; longitude: -0.723" scale="50 50 50"></a-text>
 </a-scene>
 
 </body>

aframe/build/aframe-ar-new-location-only.module.js renamed to aframe/build/aframe-ar-new-location-only.mjs

@@ -72,7 +72,7 @@ AFRAME.registerComponent("arjs-hit-testing", {
     hitTesting.update(
       camera,
       arAnchor.object3d,
-      arAnchor.parameters.changeMatrixMode
+      arAnchor.parameters.changeMatrixMode,
     );
   },
 });

aframe/build/aframe-ar-nft.module.js renamed to aframe/build/aframe-ar-nft.mjs

@@ -67,12 +67,12 @@ const ArjsDeviceOrientationControls = function (object) {
     window.addEventListener(
       "orientationchange",
       onScreenOrientationChangeEvent,
-      false
+      false,
     );
     window.addEventListener(
       "deviceorientation",
       onDeviceOrientationChangeEvent,
-      false
+      false,
     );
 
     scope.enabled = true;
@@ -82,12 +82,12 @@ const ArjsDeviceOrientationControls = function (object) {
     window.removeEventListener(
       "orientationchange",
       onScreenOrientationChangeEvent,
-      false
+      false,
     );
     window.removeEventListener(
       "deviceorientation",
       onDeviceOrientationChangeEvent,
-      false
+      false,
     );
 
     scope.enabled = false;
@@ -119,13 +119,13 @@ const ArjsDeviceOrientationControls = function (object) {
         beta = this._getSmoothedAngle(
           beta + Math.PI,
           this.lastOrientation.beta,
-          k
+          k,
         );
         gamma = this._getSmoothedAngle(
           gamma + this.HALF_PI,
           this.lastOrientation.gamma,
           k,
-          Math.PI
+          Math.PI,
         );
       } else {
         beta += Math.PI;
@@ -142,7 +142,7 @@ const ArjsDeviceOrientationControls = function (object) {
         alpha,
         beta - Math.PI,
         gamma - this.HALF_PI,
-        orient
+        orient,
       );
     }
   };

aframe/build/aframe-ar.module.js renamed to aframe/build/aframe-ar.mjs

@@ -80,7 +80,7 @@ AFRAME.registerComponent("arjs-look-controls", {
             "deviceorientationpermissiongranted",
             function () {
               magicWindowControls.enabled = data.magicWindowTrackingEnabled;
-            }
+            },
           );
         }
       }
@@ -157,7 +157,7 @@ AFRAME.registerComponent("arjs-look-controls", {
     this.onExitVR = AFRAME.utils.bind(this.onExitVR, this);
     this.onPointerLockChange = AFRAME.utils.bind(
       this.onPointerLockChange,
-      this
+      this,
     );
     this.onPointerLockError = AFRAME.utils.bind(this.onPointerLockError, this);
   },
@@ -184,7 +184,7 @@ AFRAME.registerComponent("arjs-look-controls", {
     if (!canvasEl) {
       sceneEl.addEventListener(
         "render-target-loaded",
-        AFRAME.utils.bind(this.addEventListeners, this)
+        AFRAME.utils.bind(this.addEventListeners, this),
       );
       return;
     }
@@ -208,17 +208,17 @@ AFRAME.registerComponent("arjs-look-controls", {
       document.addEventListener(
         "pointerlockchange",
         this.onPointerLockChange,
-        false
+        false,
       );
       document.addEventListener(
         "mozpointerlockchange",
         this.onPointerLockChange,
-        false
+        false,
       );
       document.addEventListener(
         "pointerlockerror",
         this.onPointerLockError,
-        false
+        false,
       );
     }
   },
@@ -252,17 +252,17 @@ AFRAME.registerComponent("arjs-look-controls", {
     document.removeEventListener(
       "pointerlockchange",
       this.onPointerLockChange,
-      false
+      false,
     );
     document.removeEventListener(
       "mozpointerlockchange",
       this.onPointerLockChange,
-      false
+      false,
     );
     document.removeEventListener(
       "pointerlockerror",
       this.onPointerLockError,
-      false
+      false,
     );
   },
 
@@ -291,7 +291,7 @@ AFRAME.registerComponent("arjs-look-controls", {
             poseMatrix.decompose(
               object3D.position,
               object3D.rotation,
-              object3D.scale
+              object3D.scale,
             );
           }
         }
@@ -316,7 +316,7 @@ AFRAME.registerComponent("arjs-look-controls", {
       this.magicWindowControls.update();
       magicWindowAbsoluteEuler.setFromQuaternion(
         this.magicWindowObject.quaternion,
-        "YXZ"
+        "YXZ",
       );
       if (!this.previousMagicWindowYaw && magicWindowAbsoluteEuler.y !== 0) {
         this.previousMagicWindowYaw = magicWindowAbsoluteEuler.y;
@@ -367,7 +367,7 @@ AFRAME.registerComponent("arjs-look-controls", {
     pitchObject.rotation.x += movementY * 0.002 * direction;
     pitchObject.rotation.x = Math.max(
       -PI_2,
-      Math.min(PI_2, pitchObject.rotation.x)
+      Math.min(PI_2, pitchObject.rotation.x),
     );
   },
 

aframe/examples/location-based/always-face-user/index.html

@@ -35,12 +35,12 @@ AFRAME.registerComponent("arjs-webcam-texture", {
         })
         .catch((e) => {
           this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-            `Webcam error: ${e}`
+            `Webcam error: ${e}`,
           );
         });
     } else {
       this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-        "sorry - media devices API not supported"
+        "sorry - media devices API not supported",
       );
     }
   },

aframe/src/component-hit-testing.js

@@ -87,7 +87,7 @@ AFRAME.registerComponent("gps-camera", {
     this.onGpsEntityPlaceAdded = this._onGpsEntityPlaceAdded.bind(this);
     window.addEventListener(
       "gps-entity-place-added",
-      this.onGpsEntityPlaceAdded
+      this.onGpsEntityPlaceAdded,
     );
 
     this.lookControls =
@@ -113,16 +113,16 @@ AFRAME.registerComponent("gps-camera", {
           function () {
             handler();
           },
-          false
+          false,
         );
 
         this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-          "After camera permission prompt, please tap the screen to activate geolocation."
+          "After camera permission prompt, please tap the screen to activate geolocation.",
         );
       } else {
         var timeout = setTimeout(function () {
           this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-            "Please enable device orientation in Settings > Safari > Motion & Orientation Access."
+            "Please enable device orientation in Settings > Safari > Motion & Orientation Access.",
           );
         }, 750);
         window.addEventListener(eventName, function () {
@@ -162,7 +162,7 @@ AFRAME.registerComponent("gps-camera", {
           this.currentCoords = localPosition;
           var distMoved = this._haversineDist(
             this.lastPosition,
-            this.currentCoords
+            this.currentCoords,
           );
 
           if (distMoved >= this.data.gpsMinDistance || !this.originCoords) {
@@ -172,7 +172,7 @@ AFRAME.registerComponent("gps-camera", {
               latitude: this.currentCoords.latitude,
             };
           }
-        }.bind(this)
+        }.bind(this),
       );
     }
   },
@@ -197,7 +197,7 @@ AFRAME.registerComponent("gps-camera", {
 
     window.removeEventListener(
       "gps-entity-place-added",
-      this.onGpsEntityPlaceAdded
+      this.onGpsEntityPlaceAdded,
     );
   },
 
@@ -233,14 +233,14 @@ AFRAME.registerComponent("gps-camera", {
         if (err.code === 1) {
           // User denied GeoLocation, let their know that
           this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-            "Please activate Geolocation and refresh the page. If it is already active, please check permissions for this website."
+            "Please activate Geolocation and refresh the page. If it is already active, please check permissions for this website.",
           );
           return;
         }
 
         if (err.code === 3) {
           this.el.sceneEl.systems["arjs"]._displayErrorPopup(
-            "Cannot retrieve GPS position. Signal is absent."
+            "Cannot retrieve GPS position. Signal is absent.",
           );
           return;
         }
@@ -332,7 +332,7 @@ AFRAME.registerComponent("gps-camera", {
     window.dispatchEvent(
       new CustomEvent("gps-camera-update-position", {
         detail: { position: this.currentCoords, origin: this.originCoords },
-      })
+      }),
     );
   },
   /**
@@ -448,7 +448,7 @@ AFRAME.registerComponent("gps-camera", {
         this.heading = this._computeCompassHeading(
           event.alpha,
           event.beta,
-          event.gamma
+          event.gamma,
         );
       } else {
         console.warn("event.absolute === false");
@@ -467,7 +467,7 @@ AFRAME.registerComponent("gps-camera", {
     var heading = 360 - this.heading;
     var cameraRotation = this.el.getAttribute("rotation").y;
     var yawRotation = THREE.MathUtils.radToDeg(
-      this.lookControls.yawObject.rotation.y
+      this.lookControls.yawObject.rotation.y,
     );
     var offset = (heading - (cameraRotation - yawRotation)) % 360;
     this.lookControls.yawObject.rotation.y = THREE.MathUtils.degToRad(offset);