Add GPS and sensor example, and examples readme

AR-js-org · Oct 26, 2024 · 58de92d · 58de92d
1 parent 05d648f
commit 58de92d
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 827 deletions.
diff --git a/examples/1-helloworld/index.html → examples/01-helloworld/index.html b/examples/1-helloworld/index.html → examples/01-helloworld/index.html
diff --git a/examples/1-helloworld/src/main.js → examples/01-helloworld/src/main.js b/examples/1-helloworld/src/main.js → examples/01-helloworld/src/main.js
diff --git a/examples/02-gps-and-sensors/index.html b/examples/02-gps-and-sensors/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/02-gps-and-sensors/src/main.js b/examples/02-gps-and-sensors/src/main.js
@@ -0,0 +1,77 @@
+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);
+document.body.appendChild(renderer.domElement);
+
+const scene = new THREE.Scene();
+
+const locar = new LocAR.LocationBased(scene, camera);
+
+window.addEventListener("resize", e => {
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+});
+
+const cam = new LocAR.WebcamRenderer(renderer);
+
+let firstLocation = true;
+
+const deviceOrientationControls = new LocAR.DeviceOrientationControls(camera);
+
+locar.on("gpsupdate", (pos, distMoved) => {
+    if(firstLocation) {
+        alert(`Got the initial location: longitude ${pos.coords.longitude}, latitude ${pos.coords.latitude}`);
+
+        const boxProps = [{
+            latDis: 0.001,
+            lonDis: 0,
+            colour: 0xff0000
+        }, {
+            latDis: -0.001,
+            lonDis: 0,
+            colour: 0xffff00
+        }, {
+            latDis: 0,
+            lonDis: -0.001,
+            colour: 0x00ffff
+        }, {
+            latDis: 0,
+            lonDis: 0.001,
+            colour: 0x00ff00
+        }];
+
+        const geom = new THREE.BoxGeometry(20,20,20);
+
+        for(const boxProp of boxProps) {
+            const mesh = new THREE.Mesh(
+                geom, 
+                new THREE.MeshBasicMaterial({color: boxProp.colour})
+            );
+
+            console.log(`adding at ${pos.coords.longitude + boxProp.lonDis},${pos.coords.latitude + boxProp.latDis}`);    
+            locar.add(
+                mesh, 
+                pos.coords.longitude + boxProp.lonDis, 
+                pos.coords.latitude + boxProp.latDis
+            );
+        }
+
+        firstLocation = false;
+    }
+});
+
+locar.startGps();
+
+renderer.setAnimationLoop(animate);
+
+function animate() {
+    cam.update();
+    deviceOrientationControls.update();
+    renderer.render(scene, camera);
+}
+