Merge pull request #409 from AR-js-org/three-location-based-example-fix

Three location based example fix

Author: nickw1

three.js/examples/location-based/index.js

@@ -11,56 +11,70 @@ const camera = new THREE.PerspectiveCamera(80, 2, 0.1, 50000);
 const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#canvas1') });
 
 const geom = new THREE.BoxGeometry(20,20,20);
-const material = new THREE.MeshBasicMaterial({color: 0xff0000});
-const mesh = new THREE.Mesh(geom, material);
 
 const threex = new THREEx.LocationBased(scene, camera);
 const cam = new THREEx.WebcamRenderer(renderer, '#video1');
 
-// If using your own GPS location, change the lon and lat of the four meshes.
-threex.add(mesh, -0.72, 51.051); // slightly north
-const material2 = new THREE.MeshBasicMaterial({color: 0xffff00});
-const material3 = new THREE.MeshBasicMaterial({color: 0x0000ff});
-const material4 = new THREE.MeshBasicMaterial({color: 0x00ff00});
-threex.add(new THREE.Mesh(geom, material2), -0.72, 51.049); // slightly south
-threex.add(new THREE.Mesh(geom, material3), -0.722, 51.05); // slightly west
-threex.add(new THREE.Mesh(geom, material4), -0.718, 51.05); // slightly east
+const oneDegAsRad = THREE.Math.degToRad(1);
+
 
 let orientationControls;
 
 if (isMobile()){   
     orientationControls = new THREEx.DeviceOrientationControls(camera);
-    if(navigator.geolocation !== 'undefined') {
-        navigator.geolocation.getCurrentPosition((pos)=>{
-            if (pos !== 'undefined') {
-                console.log('geolocation works');
-                threex.startGps();
-            } else {
-                console.log('geolocation error');
-            }
-        })
-    if( navigator.geolocation.getCurrentPosition(()=>{}) == null){
-        console.log('geolocation not enabled use fakeGps');
-        threex.fakeGps(-0.72, 51.05);
-    }
-        
-    } else {
-        threex.fakeGps(-0.72, 51.05);
-    }
+} 
 
-    threex.on("gpsupdate", pos => {
-        console.log(`${pos.coords.latitude} ${pos.coords.longitude}`);
-    });
-} else {
-    threex.fakeGps(-0.72, 51.05);
+let fake = null;
+let first = true;
 
+// Uncomment to use a fake GPS location
+// fake = { lat: 51.05, lon : -0.72 };
+if(fake) {
+    setupObjects(fake.lon, fake.lat);
+    threex.fakeGps(fake.lon, fake.lat);
+} else {
     threex.on("gpsupdate", pos => {
-        console.log(`${pos.coords.latitude} ${pos.coords.longitude}`);
+		if(first) {
+        setupObjects(pos.coords.longitude, pos.coords.latitude);
+		first = false;
+		}
     });
-}
+    threex.startGps();
+} 
 
 requestAnimationFrame(render);
 
+
+
+let mousedown = false, lastX =0;
+
+// Mouse events for testing on desktop machine
+if(!isMobile()) {
+    window.addEventListener("mousedown", e=> {
+        mousedown = true;
+    });
+
+    window.addEventListener("mouseup", e=> {
+        mousedown = false;
+    });
+
+    window.addEventListener("mousemove", e=> {
+        if(!mousedown) return;
+        if(e.clientX < lastX) {
+            camera.rotation.y -= oneDegAsRad; 
+            if(camera.rotation.y < 0) {
+                camera.rotation.y += 2 * Math.PI;
+            }
+        } else if (e.clientX > lastX) {
+            camera.rotation.y += oneDegAsRad;
+            if(camera.rotation.y > 2 * Math.PI) {
+                camera.rotation.y -= 2 * Math.PI;
+            }
+        }
+        lastX = e.clientX;
+    });
+}
+
 function render(time) {
     resizeUpdate();
     if(orientationControls) orientationControls.update();
@@ -78,3 +92,15 @@ function resizeUpdate() {
     camera.aspect = canvas.clientWidth / canvas.clientHeight;
     camera.updateProjectionMatrix();
 }
+
+function setupObjects(longitude, latitude) {
+    // Use position of first GPS update (fake or real)
+    const material = new THREE.MeshBasicMaterial({color: 0xff0000});
+    const material2 = new THREE.MeshBasicMaterial({color: 0xffff00});
+    const material3 = new THREE.MeshBasicMaterial({color: 0x0000ff});
+    const material4 = new THREE.MeshBasicMaterial({color: 0x00ff00});
+    threex.add(new THREE.Mesh(geom, material), longitude, latitude + 0.001); // slightly north
+    threex.add(new THREE.Mesh(geom, material2), longitude, latitude - 0.001); // slightly south
+    threex.add(new THREE.Mesh(geom, material3), longitude - 0.001, latitude); // slightly west
+    threex.add(new THREE.Mesh(geom, material4), longitude + 0.001, latitude); // slightly east
+}