Add click handler and two more examples

AR-js-org · Nov 3, 2024 · 3a5a99d · 3a5a99d
1 parent 44e22fa
commit 3a5a99d
Show file tree

Hide file tree

Showing 21 changed files with 410 additions and 177 deletions.
diff --git a/docs/01-helloworld/index.html b/docs/01-helloworld/index.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 <title>three.js</title>
-  <script type="module" crossorigin src="/locar.js/assets/01-helloworld-B_XJysGc.js"></script>
-  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-K2XRG_mr.js">
+  <script type="module" crossorigin src="/locar.js/assets/01-helloworld-BK54cGeW.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-D2pHxP8J.js">
 </head>
 <body>
 </body>

diff --git a/docs/02-gps-and-sensors/index.html b/docs/02-gps-and-sensors/index.html
@@ -2,8 +2,8 @@
 <html>
 <head>
 <title>three.js</title>
-  <script type="module" crossorigin src="/locar.js/assets/02-gps-and-sensors-Bz5hD0d7.js"></script>
-  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-K2XRG_mr.js">
+  <script type="module" crossorigin src="/locar.js/assets/02-gps-and-sensors-La4_GML4.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-D2pHxP8J.js">
 </head>
 <body>
 </body>

diff --git a/docs/03-ar-objects/index.html b/docs/03-ar-objects/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>three.js</title>
+  <script type="module" crossorigin src="/locar.js/assets/03-ar-objects-D3M74PcG.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-D2pHxP8J.js">
+</head>
+<body>
+</body>
+</html>
diff --git a/docs/04-api-communication/index.html b/docs/04-api-communication/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>three.js</title>
+  <script type="module" crossorigin src="/locar.js/assets/04-api-communication-B3laukjY.js"></script>
+  <link rel="modulepreload" crossorigin href="/locar.js/assets/locar.es-D2pHxP8J.js">
+</head>
+<body>
+</body>
+</html>
diff --git a/docs/assets/01-helloworld-B_XJysGc.js → docs/assets/01-helloworld-BK54cGeW.js b/docs/assets/01-helloworld-B_XJysGc.js → docs/assets/01-helloworld-BK54cGeW.js
diff --git a/docs/assets/02-gps-and-sensors-Bz5hD0d7.js → docs/assets/02-gps-and-sensors-La4_GML4.js b/docs/assets/02-gps-and-sensors-Bz5hD0d7.js → docs/assets/02-gps-and-sensors-La4_GML4.js
diff --git a/docs/assets/03-ar-objects-D3M74PcG.js b/docs/assets/03-ar-objects-D3M74PcG.js
diff --git a/docs/assets/04-api-communication-B3laukjY.js b/docs/assets/04-api-communication-B3laukjY.js
diff --git a/docs/assets/locar.es-K2XRG_mr.js → docs/assets/locar.es-D2pHxP8J.js b/docs/assets/locar.es-K2XRG_mr.js → docs/assets/locar.es-D2pHxP8J.js
diff --git a/docs/index.html b/docs/index.html
@@ -17,6 +17,7 @@ <h1>LocAR.js examples</h1>
 <ol>
 <li><a href='01-helloworld/index.html'>Hello World</a>: Display a red cube just to the north of a fake GPS location. Can be tested on a desktop or laptop.</li>
 <li><a href='02-gps-and-sensors/index.html'>GPS and Sensors</a>: Requires a mobile device wih GPS and sensors. Demonstrates use of the GPS and the device sensors to show real AR. Gets your initial location and displays four coloured boxes to the north (red), south (yellow), west (blue) and east (green) of your initial location. Can be used as a test to check whether your device sensors are accurate; if the red box does not appear to the North, your device sensors may be mis-calibrated.</li>
+<li><a href='03-ar-objects/index.html'>AR Objects</a>: shows how you can add real AR objects with a given latitude and longitude and properties. Also shows how you can detect clicks on objects. Uses a hard-coded "fake" location and hard-coded objects, and you can rotate the three.js camera using the mouse, so will work on a desktop or laptop.</li>
 </ol>
 </body>
 </html>
diff --git a/examples/03-ar-objects/index.html b/examples/03-ar-objects/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>three.js</title>
+<script type='module' src='src/main.js'></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/03-ar-objects/src/main.js b/examples/03-ar-objects/src/main.js
@@ -0,0 +1,92 @@
+import * as THREE from 'three';
+import * as LocAR from 'locar';
+
+const camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 0.001, 1000);
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+const scene = new THREE.Scene();
+
+
+document.body.appendChild(renderer.domElement);
+
+
+window.addEventListener("resize", e => {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+});
+
+const locar = new LocAR.LocationBased(scene, camera);
+
+const cam = new LocAR.WebcamRenderer(renderer);
+
+
+let firstPosition = true;
+const oneDegAsRad = THREE.MathUtils.degToRad(1.0);
+
+const indexedObjects = { };
+
+const cube = new THREE.BoxGeometry(20, 20, 20);
+
+let mouseDown = false, initX;
+let curRotation = 0.0;
+
+const clickHandler = new LocAR.ClickHandler(renderer);
+
+renderer.domElement.addEventListener("mousedown", e=> {
+    mouseDown = true;
+    initX = e.clientX;
+});
+
+renderer.domElement.addEventListener("mousemove", e=> {
+    if(mouseDown) {
+        curRotation += e.clientX > initX ? oneDegAsRad*10: -oneDegAsRad*10;
+        if(curRotation > Math.PI) {
+            curRotation -= 2*Math.PI;
+        } else if(curRotation < -Math.PI) {
+             curRotation += 2*Math.PI;
+        }
+        camera.rotation.set(0, curRotation, 0);
+    }
+});
+
+renderer.domElement.addEventListener("mouseup", e=> {
+    mouseDown = false;
+
+});
+
+locar.on("gpsupdate", async(pos, distMoved) => {
+
+    // Even if you have static AR objects, as opposed to objects from an 
+    // API, you must wait until the first GPS update before adding the 
+    // objects. This is because the internal x, y and z coordinates of each
+    // object are relative to the initial position, and if we do not yet
+    // have a GPS position, the initial position will be unknown. 
+    if(firstPosition) {
+        firstPosition = false;
+        const guildhall = new THREE.Mesh(
+            cube,
+            new THREE.MeshBasicMaterial({color: 0x00ffff})
+        );
+        const oneills = new THREE.Mesh(
+            cube,
+            new THREE.MeshBasicMaterial({color: 0xff0000})
+        );
+
+        locar.add(guildhall, -1.406392, 50.908042, 0, { "name": "Guildhall"} );
+        locar.add(oneills, -1.404340, 50.907330, 0, { "name": "O'Neills"} );
+    }
+
+});
+locar.fakeGps(-1.404555, 50.908015);
+
+renderer.setAnimationLoop(animate);
+
+function animate() {
+    cam.update();
+    const objects = clickHandler.raycast(camera, scene);
+    if(objects.length) {
+        alert(`This is ${objects[0].object.properties.name}`);
+    }
+    renderer.render(scene, camera);
+}
diff --git a/examples/04-api-communication/index.html b/examples/04-api-communication/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>three.js</title>
+<script type='module' src='src/main.js'></script>
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/04-api-communication/src/main.js b/examples/04-api-communication/src/main.js
@@ -0,0 +1,68 @@
+import * as THREE from 'three';
+import * as LocAR from 'locar';
+
+const camera = new THREE.PerspectiveCamera(80, window.innerWidth/window.innerHeight, 0.001, 1000);
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize(window.innerWidth, window.innerHeight);
+const scene = new THREE.Scene();
+
+
+document.body.appendChild(renderer.domElement);
+
+
+window.addEventListener("resize", e => {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+});
+
+const locar = new LocAR.LocationBased(scene, camera);
+
+const deviceControls = new LocAR.DeviceOrientationControls(camera);
+
+const cam = new LocAR.WebcamRenderer(renderer);
+
+
+let firstPosition = true;
+
+const indexedObjects = { };
+
+const cube = new THREE.BoxGeometry(20, 20, 20);
+
+const clickHandler = new LocAR.ClickHandler(renderer);
+
+locar.on("gpsupdate", async(pos, distMoved) => {
+
+    if(firstPosition || distMoved > 100) {
+
+        const response = await fetch(`https://hikar.org/webapp/map?bbox=${pos.coords.longitude-0.02},${pos.coords.latitude-0.02},${pos.coords.longitude+0.02},${pos.coords.latitude+0.02}&layers=poi&outProj=4326`);
+        const pois = await response.json();
+
+        pois.features.forEach ( poi => {
+            if(!indexedObjects[poi.properties.osm_id]) {
+                const mesh = new THREE.Mesh(
+                    cube,
+                    new THREE.MeshBasicMaterial({color: 0xff0000})
+                );                
+
+                locar.add(mesh, poi.geometry.coordinates[0], poi.geometry.coordinates[1], 0, poi.properties);
+                indexedObjects[poi.osm_id] = mesh;
+            }
+        });
+        firstPosition = false;
+    }
+
+});
+locar.startGps();
+
+renderer.setAnimationLoop(animate);
+
+function animate() {
+    cam.update();
+    deviceControls.update();
+    const objects = clickHandler.raycast(scene, camera);
+    if(objects.length) {
+        alert(`This is ${objects[0].object.properties.name}`);
+    }
+    renderer.render(scene, camera);
+}
diff --git a/examples/index.html b/examples/index.html
@@ -17,6 +17,7 @@ <h1>LocAR.js examples</h1>
 <ol>
 <li><a href='01-helloworld/index.html'>Hello World</a>: Display a red cube just to the north of a fake GPS location. Can be tested on a desktop or laptop.</li>
 <li><a href='02-gps-and-sensors/index.html'>GPS and Sensors</a>: Requires a mobile device wih GPS and sensors. Demonstrates use of the GPS and the device sensors to show real AR. Gets your initial location and displays four coloured boxes to the north (red), south (yellow), west (blue) and east (green) of your initial location. Can be used as a test to check whether your device sensors are accurate; if the red box does not appear to the North, your device sensors may be mis-calibrated.</li>
+<li><a href='03-ar-objects/index.html'>AR Objects</a>: shows how you can add real AR objects with a given latitude and longitude and properties. Also shows how you can detect clicks on objects. Uses a hard-coded "fake" location and hard-coded objects, and you can rotate the three.js camera using the mouse, so will work on a desktop or laptop.</li>
 </ol>
 </body>
 </html>
diff --git a/examples/package.json b/examples/package.json
@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "three": "^0.169.0",
-	"locar": "file:../locar-0.0.1.tgz"
+    "locar": "file:../locar-0.0.2.tgz"
   },
   "devDependencies": {
     "vite": "^5.4.8"

diff --git a/examples/vite.config.js → examples/vite.config.mjs b/examples/vite.config.js → examples/vite.config.mjs
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import { resolve } from 'path';
 
 const entries = { main: 'index.html' };
-['01-helloworld', '02-gps-and-sensors'].forEach ( example => {
+['01-helloworld', '02-gps-and-sensors', '03-ar-objects', '04-api-communication'].forEach ( example => {
     entries[example] = resolve(__dirname, `${example}/index.html`);
 });
 

diff --git a/lib/main.js b/lib/main.js
@@ -1,5 +1,6 @@
 import { LocationBased } from "./src/location-based.js";
 import { WebcamRenderer } from "./src/webcam-renderer.js";
 import { DeviceOrientationControls } from "./src/device-orientation-controls.js";
+import { ClickHandler } from './src/click-handler.js';
 
-export { LocationBased, WebcamRenderer, DeviceOrientationControls };
+export { LocationBased, WebcamRenderer, DeviceOrientationControls, ClickHandler  };
diff --git a/lib/src/click-handler.js b/lib/src/click-handler.js
@@ -0,0 +1,28 @@
+import * as THREE from 'three';
+
+class ClickHandler {
+
+    constructor(renderer) {
+        this.raycaster = new THREE.Raycaster();
+        this.normalisedMousePosition = new THREE.Vector2(null, null);
+        renderer.domElement.addEventListener("click", e => {
+            this.normalisedMousePosition.set (
+                ((e.clientX / renderer.domElement.clientWidth) * 2) - 1,
+                -((e.clientY / renderer.domElement.clientHeight) * 2) + 1
+            );    
+        });
+    }
+
+
+    raycast(camera, scene) {
+        if(this.normalisedMousePosition.x !== null && this.normalisedMousePosition.y !== null) {
+            this.raycaster.setFromCamera(this.normalisedMousePosition, camera);
+            const objects = this.raycaster.intersectObjects(scene.children, false);
+            this.normalisedMousePosition.set(null, null);
+            return objects;
+        }    
+        return [];
+    }
+}
+
+export { ClickHandler };    
diff --git a/lib/src/location-based.js b/lib/src/location-based.js
@@ -1,6 +1,7 @@
 import { SphMercProjection } from "./sphmerc-projection.js";
 import * as THREE from "three";
 
+
 class LocationBased {
   constructor(scene, camera, options = {}) {
     this._scene = scene;
@@ -84,7 +85,8 @@ class LocationBased {
     return [projectedPos[0], -projectedPos[1]];
   }
 
-  add(object, lon, lat, elev) {
+  add(object, lon, lat, elev, properties = { }) {
+    object.properties = properties;
     this.setWorldPosition(object, lon, lat, elev);
     this._scene.add(object);
   }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "locar",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Location-based AR from AR.js.",
   "files": [
     "dist"