Merge pull request #126 from BernatBC/fix-camera-direction

Fix setting direction while navigating

interaction.js

@@ -22,6 +22,7 @@ var mDragging = false;
 var mDown = false;
 var camera;
 var scene;
+var controls;
 var mode = "multi";
 
 const HOVER_COLOR = 0xccffff;
@@ -32,9 +33,10 @@ const RANGE_COLOR = 0xfcae1e;
 var imagesSelected = new Set();
 var rangeImages = new Set();
 
-function addInteraction(cam, sce) {
+function addInteraction(cam, sce, cntrls) {
     camera = cam;
     scene = sce;
+    controls = cntrls;
     setPlaneScene(sce);
     setSphereScene(sce);
     setCylinderScene(sce);
@@ -56,16 +58,16 @@ function addInteraction(cam, sce) {
 
     window.addEventListener("pointermove", onHover);
 
-    addEventListener("storage", (event) => {
+    window.addEventListener("storage", (event) => {
+        console.log("navigate");
         let images = getAllImages();
         images.forEach((i) => {
             if (i.name != localStorage.getItem("navigate")) return;
-            console.log(i.position);
-            console.log(i.userData.direction);
-            console.log(camera);
-            camera.position.set(i.position.x, i.position.y, i.position.z);
-            camera.lookAt(i.userData.direction.x, i.userData.direction.y, i.userData.direction.z);
+            camera.position.copy(i.position);
+            let target = new THREE.Vector3().copy(i.position).add(i.userData.direction);
+            controls.target.set(target.x, target.y, target.z);
         });
+        localStorage.setItem("navigate", null);
     });
 }
 
@@ -190,9 +192,6 @@ function createJSON(objectArray) {
 }
 
 function get2DCoords(C, P) {
-    console.log("---");
-    console.log(C);
-    console.log(P);
     const V = new THREE.Vector3().subVectors(P, C).normalize();
     const phi = math.acos(V.y);
     const theta = math.atan2(V.x, V.z);

main.js

@@ -103,7 +103,7 @@ await loadImages(
     "out-files/MNAC-AbsidiolaSud/MNAC-AbsSud-CamerasRegistration.out"
 );
 
-addInteraction(camera, scene);
+addInteraction(camera, scene, controls);
 
 window.addEventListener("resize", onWindowResize, false);
 

openseadragon.js

@@ -53,22 +53,32 @@ var viewer = OpenSeadragon({
 viewer.zoomPerClick = 1;
 
 viewer.addHandler("open", function () {
+    if (mode === "single" || parsedImages.size == 1) return;
     distribute(parsedImages);
 });
 
 viewer.addHandler("canvas-click", function (event) {
     if (!event.quick) return;
+    if (mode === "single") {
+        localStorage.setItem("navigate", image);
+        console.log("Navigate: " + image);
+        window.dispatchEvent(new Event("storage"));
+        return;
+    }
     var viewportPoint = viewer.viewport.pointFromPixel(event.position);
+    console.log(viewportPoint);
     for (let i = 0; i < viewer.world.getItemCount(); i++) {
         let a = viewer.world.getItemAt(i);
         let bounds = a.getBounds();
+        console.log(bounds);
         if (
             viewportPoint.x < bounds.x ||
             viewportPoint.x > bounds.x + bounds.width ||
             viewportPoint.y < bounds.y ||
             viewportPoint.y > bounds.y + bounds.height
         )
             continue;
+        console.log("Navigate: " + parsedImages[i].name);
         localStorage.setItem("navigate", parsedImages[i].name);
         return;
     }
@@ -140,6 +150,7 @@ function moveImage(a, output, i) {
 }
 
 function invertZoom() {
+    if (mode === "single" || parsedImages.size == 1) return;
     regularZoom = !regularZoom;
     if (regularZoom) {
         document.getElementById("invert-zoom").style.display = "inline";
@@ -153,6 +164,7 @@ function invertZoom() {
 }
 
 function togglePosition() {
+    if (mode === "single" || parsedImages.size == 1) return;
     realPosition = !realPosition;
     if (realPosition) {
         document.getElementById("intersection-position").style.display = "inline";