upgrade three.js and aframe

.github/dependabot.yml

@@ -0,0 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+
+  - package-ecosystem: "github-actions"
+    # Workflow files stored in the default location of `.github/workflows`. (You don't need to specify `/.github/workflows` for `directory`. You can use `directory: "/"`.)
+    directory: "/"
+    schedule:
+      interval: "weekly"

.github/workflows/CI.yml

@@ -6,27 +6,31 @@ on:
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
 
-  tests:
-    strategy:
-      matrix:
-        node:
-          - 18.x
+  check-and-test:
 
     runs-on: ubuntu-20.04
-    name: Node.js ${{ matrix.node }}
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v3
+      - name: Use Node.js from .nvmrc
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
-      - uses: actions/cache@v3
+          node-version-file: ".nvmrc"
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+
+      - uses: actions/cache@v4
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
         with:
-          path: ~/.npm
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
+
       - name: Npm update
         run: npm update
       - name: Npm install

.github/workflows/build.yml

@@ -7,21 +7,26 @@ name: Build AR.js libraries
 on: push
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x]
+  check-and-test:
+    runs-on: ubuntu-20.04
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js from .nvmrc
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node-version }}
-      - uses: actions/cache@v3
+          node-version-file: ".nvmrc"
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        shell: bash
+        run: echo "dir=$(npm config get cache)" >> ${GITHUB_OUTPUT}
+
+      - uses: actions/cache@v4
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
         with:
-          path: ~/.npm
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
@@ -36,7 +41,7 @@ jobs:
           echo ${{ steps.vars.outputs.tag }}
       - run: npm update
       - run: npm install
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: build
           path: |
@@ -52,13 +57,16 @@ jobs:
           message: new build files from action
           add: '["aframe/build", "three.js/build"]'
       - name: Release
-        uses: softprops/action-gh-release@v1
+        uses: softprops/action-gh-release@v2
         if: startsWith(github.ref, 'refs/tags/')
         with:
           files: |
             aframe/build/aframe-ar.js
             aframe/build/aframe-ar-nft.js
             aframe/build/aframe-ar-location-only.js
             three.js/build/ar.js
+            three.js/build/ar.module.js
             three.js/build/ar-threex.js
+            three.js/build/ar-threex.module.js
             three.js/build/ar-threex-location-only.js
+            three.js/build/ar-threex-location-only.module.js

.nvmrc

@@ -1 +1 @@
-18.15.0
+v20.18.0

aframe/examples/image-tracking/nft-video/index.html

@@ -1,6 +1,6 @@
-<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-master.min.js"></script>
 
-<!--<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>-->
+<!--<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>-->
 <script src='../../../../aframe/build/aframe-ar-nft.js'></script>
 
 <script>

aframe/examples/image-tracking/nft/index.html

@@ -1,4 +1,4 @@
-<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-master.min.js"></script>
 
 <style>
   .arjs-loader {
@@ -22,7 +22,7 @@
 </style>
 
 <!-- rawgithack development URL -->
-<!--<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js'></script>-->
+<!--<script src='https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js'></script>-->
 <script src='../../../../aframe/build/aframe-ar-nft.js'></script>
 
 

aframe/examples/location-based/README.md

@@ -1,21 +1,25 @@
-# Location-based examples
+# Examples for A-Frame `new-location-based` components
 
-A brief summary of each example follows below. Aside from `hello-world`, the majority of the applications have a simulated lattitude and longitude; please modify the code to use your actual latitude and longitude.
+These examples have been written specifically, or adapted, for the `new-location-based` components available in AR.js 3.4.0 upwards.
 
-- `hello-world`: a simple example placing a cube at a given latitude and longitude. You must edit the code to supply your latitude and longitude.
+- `hello-world` : A basic Hello World example, using only HTML, which shows a box 0.001 degrees north of your location.
 
-- `projected-based-camera` : version of `hello-world` using `gps-projected-camera` and `gps-projected-entity-place`.
+- `multiple-boxes` : An extension of the `hello-world` example with four boxes, to the north, south, east and west of your current location.
 
-- `click-places` -  a version of `hello-world` which demonstrates click events on entities. Please look at the code and note how the raycaster is working.
+- `always-face-user` : Displays text 0.001 degrees north of your current location, using the third-party A-Frame look-at component to make the text always face the camera.
 
-- `always-face-user` - shows how you can use A-Frame's `look-at` component to create an entity which always faces the user.
+- `click-places` : Demonstrates how you can add click events to your AR objects, making use of A-Frame's `cursor` and `raycaster` components.
 
-- `avoid-shaking` - demonstrates the parameters needed to minimise shaking effects. Please look at the source code for full details.
+- `basic-js` : Basic JavaScript example which dynamically creates four boxes to the north, south, east and west of your initial GPS position (whatever that is). Allows you to enter a "fake" latitude and longitude for testing on a desktop.
 
-- `show-arbitrary-distant-places` - shows how you can view AR content many kilometres away using the `videoTexture` component. (In fact, currently, all working examples use `videoTexture` due to an issue - pending investigation - which occurs if it's not set)
+- `basic-js-modules` : version of `basic-js` which uses an ES6 import to include AR.js. Requires building using Webpack: a `webpack.config.js` is provided.
 
-- `places-name` - shows the use of a web API to download local POIs but currently non-operational due to the CORS proxy no longer being available.
+- `show-distance` : version of `basic-js` which shows the distance to a given object when you click on it.
 
-- `peakfinder-2d` - shows the use of an OpenStreetMap based web API to download local summits. Does *not* include elevation though, hence the `2d`. Uses a working proxy.
+- `poi` : Demonstrates downloading POIs from an OpenStreetMap-based GeoJSON API and adding them to the scene as objects, with text labels.
 
-- `osm-ways` - shows how you can use AR.js to show not just simple point features but more complex geodata such as polylines. Downloads OpenStreetMap ways (roads, footpaths etc) from a server and renders them as polylines.
+- `poi-component` : Similar to `poi`, but demonstrating the use of a custom A-Frame component to download and display the POIs.
+
+- `osm-ways` : A more complex example showing how more specialised geodata can be rendered with AR.js. Downloads OpenStreetMap ways (roads, paths) from a GeoJSON API, reprojects them into Spherical Mercator, and adds them to the scene as polylines made up of individual triangles.
+
+- `avoid-shaking` : A version of `basic-js` with a smoothing factor applied to reduce shaking effects.

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

@@ -1,21 +1,29 @@
+
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <title>GeoAR.js demo</title>
-    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
-    <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
 </head>
-
-<body style='margin: 0; overflow: hidden;'>
-    <a-scene
-        vr-mode-ui="enabled: false"
-        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
-
-        <a-camera gps-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
-        <a-text value="This will always face the user." look-at="[gps-camera]" scale="75 75 75" gps-entity-place="latitude: 51.0491; longitude: -0.723;"></a-text>
-    </a-scene>
+<body>
+<!-- 
+This is using a simulated location. If testing on a mobile device, remove the 
+'simulateLatitude' and 'simulateLongitude' properties from 'gps-new-camera' and
+change the 'latitude' and 'longitude' properties to a location around 0.001 
+degrees from your real location.
+-->
+<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
+	<a-camera gps-new-camera='gpsMinDistance: 5; simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
+<!-- 
+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-scene>
+
 </body>
-
+</html>

aframe/examples/location-based/avoid-shaking/index.html

@@ -1,36 +1,21 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
-    <title>GeoAR.js demo</title>
-    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-    <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+<title>AR.js A-Frame</title>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+<!-- Assumes AR.js build is in the 'AR.js' directory -->
+<script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
+<script type='text/javascript' src='../../../build/aframe-ar.js'></script>
+<script src='index.js'></script>
 </head>
-
-<body style='margin: 0; overflow: hidden;'>
-    <a-scene
-        vr-mode-ui="enabled: false"
-		arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
-
-        <!-- ~ 400m far -->
-        <a-box material="color: red;" scale="5 5 5" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-box> 
-
-        <!-- ~ 20m far -->
-        <a-image src="place.png" gps-entity-place="latitude: 44.504417; longitude: 11.301317;"
-        ></a-image> 
-
-        <!-- ~ 0m far -->
-        <a-image src="place.png" gps-entity-place="latitude: 44.504348; longitude: 11.301027;"
-            ></a-image>
-
-        <!-- using gpsMinDistance: 5 => update GPS only if user moves by 5 meters or more => avoid shaking for near objects -->
-        <!-- using accelerationToMove: 1.0 => 'smooth' inertial sensors precision precision in order to avoid distant places shaking -->
-        <a-camera
-            rotation-reader
-            gps-camera="simulateLatitude: 44.50437; simulateLongitude: 11.30106; gpsMinDistance: 10;"
-        >
-		</a-camera>
-	</a-scene>
+<body>
+<a-scene vr-mode-ui='enabled: false' arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' renderer='antialias: true; alpha: true'>
+	<a-camera look-controls-enabled='false' arjs-device-orientation-controls='smoothingFactor:0.1' gps-new-camera='gpsMinDistance: 5'></a-camera>
+</a-scene>
+<div id='setloc' style='position:absolute; left: 10px; bottom: 2%; z-index:999; background-color: blue; color: white; padding: 10px'>
+Lat:<input id="lat" value="51.049" /> 
+Lon: <input id="lon" value="-0.723"/> 
+Min Acc: <input id='minacc' value='1000' /> <input type='button' id='go' value='go' />
+</div>
 </body>
-
+</html>

aframe/examples/new-location-based/basic-js/index.html → aframe/examples/location-based/basic-js/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>AR.js A-Frame</title>
-<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
+<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
 <!-- Assumes AR.js build is in the 'AR.js' directory -->
 <script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
 <script type='text/javascript' src='../../../build/aframe-ar.js'></script>

aframe/examples/location-based/classic-components/README.md

@@ -0,0 +1,15 @@
+# Location-based examples for classic location-based components
+
+These examples are for the "classic" location-based components, not the `new-location-based` components.
+
+A brief summary of each example follows below. Aside from `hello-world`, the majority of the applications have a simulated lattitude and longitude; please modify the code to use your actual latitude and longitude.
+
+- `always-face-user` - shows how you can use A-Frame's `look-at` component to create an entity which always faces the user.
+
+- `avoid-shaking` - demonstrates the parameters needed to minimise shaking effects. Please look at the source code for full details.
+
+- `click-places` - shows how you can handle click events on places
+
+- `max-min-distance` - how to control the max and min distance you can view an object.
+
+- `peakfinder-2d` - download nearby peaks from an OpenStreetMap-based server (works in Europe and Turkey only) and shows them in AR.

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

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/aframe-look-at-component.min.js"></script>
+    <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
+</head>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        vr-mode-ui="enabled: false"
+        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
+
+        <a-camera gps-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
+        <a-text value="This will always face the user." look-at="[gps-camera]" scale="75 75 75" gps-entity-place="latitude: 51.0491; longitude: -0.723;"></a-text>
+    </a-scene>
+</body>
+

aframe/examples/location-based/classic-components/avoid-shaking/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>GeoAR.js demo</title>
+    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+    <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
+</head>
+
+<body style='margin: 0; overflow: hidden;'>
+    <a-scene
+        vr-mode-ui="enabled: false"
+		arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'>
+
+        <!-- ~ 400m far -->
+        <a-box material="color: red;" scale="5 5 5" gps-entity-place="latitude: 44.506477; longitude: 11.301524;"></a-box> 
+
+        <!-- ~ 20m far -->
+        <a-image src="place.png" gps-entity-place="latitude: 44.504417; longitude: 11.301317;"
+        ></a-image> 
+
+        <!-- ~ 0m far -->
+        <a-image src="place.png" gps-entity-place="latitude: 44.504348; longitude: 11.301027;"
+            ></a-image>
+
+        <!-- using gpsMinDistance: 5 => update GPS only if user moves by 5 meters or more => avoid shaking for near objects -->
+        <!-- using accelerationToMove: 1.0 => 'smooth' inertial sensors precision precision in order to avoid distant places shaking -->
+        <a-camera
+            rotation-reader
+            gps-camera="simulateLatitude: 44.50437; simulateLongitude: 11.30106; gpsMinDistance: 10;"
+        >
+		</a-camera>
+	</a-scene>
+</body>
+

aframe/examples/new-location-based/click-places/index.html → aframe/examples/location-based/classic-components/click-places/index.html

@@ -2,9 +2,8 @@
 <html> 
     <head>
         <title>AR.js Click Places Example</title>
-        <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
-        <script type='text/javascript' src='../../../../three.js/build/ar-threex-location-only.js'></script>
-        <script type='text/javascript' src='../../../build/aframe-ar-nft.js'></script>
+        <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
+        <script type='text/javascript' src='../../../../build/aframe-ar-nft.js'></script>
         <script>
         AFRAME.registerComponent('clicker', {
             init: function() {
@@ -22,8 +21,8 @@
         raycaster='near: 0; far: 50000'
         arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false;'
         renderer='antialias: true; alpha: true'>
-            <a-camera gps-new-camera='simulateLatitude: 51.049; simulateLongitude: -0.723'></a-camera>
-            <a-box gps-new-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
+            <a-camera gps-projected-camera='simulateLatitude: 51.049; simulateLongitude: -0.723' rotation-reader></a-camera>
+            <a-box gps-projected-entity-place='latitude: 51.0596; longitude: -0.7170' color='red' scale='200 200 200' clicker></a-box>
     </a-scene>
     </body>
 </html>