Merge pull request #135 from BernatBC/web3d-bernat

Web3d bernat
BernatBC · Aug 15, 2024 · 8cb7ab1 · 8cb7ab1
2 parents e94e620 + 6d4f925
commit 8cb7ab1
Show file tree

Hide file tree

Showing 10 changed files with 203 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -4,9 +4,18 @@
         <meta charset="utf-8" />
         <title>My first three.js app</title>
         <style>
-            body {
+            html {
+                height: 100%;
+                }
+                body {
                 margin: 0;
-            }
+                height: 100%;
+                }
+                canvas {
+                width: 100%;
+                height: 100%;
+                display: block;
+                }
         </style>
     </head>
     <body>

diff --git a/interaction.js b/interaction.js
@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { render } from "./main.js";
+import { render, renderer } from "./main.js";
 import { getAllImages } from "./single-image-loader.js";
 import { createPlane, setScene as setPlaneScene } from "./plane.js";
 import { createSphere, setScene as setSphereScene } from "./sphere.js";
@@ -78,12 +78,23 @@ function onClick() {
     event.preventDefault();
     // Avoid clicking images behind GUI
     if (event.target.tagName !== "CANVAS") return;
-    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+    // get x,y coords into canvas where click occurred
+    var rect = event.target.getBoundingClientRect();
+    var x = event.clientX - rect.left;
+    var y = event.clientY - rect.top;
+    mouse.x = (x / event.target.clientWidth) * 2 - 1;
+    mouse.y = -(y / event.target.clientHeight) * 2 + 1;
+
+    /*mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    */
     raycaster.setFromCamera(mouse, camera);
 
     var intersects = raycaster.intersectObject(scene, true);
-    if (intersects.length == 0) return;
+    if (intersects.length == 0) {
+        console.log("No intersection detected.");
+        return;
+    }
 
     if (!authoringMode) {
         openFigure(intersects);
@@ -153,8 +164,19 @@ function onHover() {
     event.preventDefault();
     // Avoid clicking images behind GUI
     if (event.target.tagName !== "CANVAS") return;
+
+    // get x,y coords into canvas where click occurred
+    var rect = event.target.getBoundingClientRect();
+    var x = event.clientX - rect.left;
+    var y = event.clientY - rect.top;
+    mouse.x = (x / event.target.clientWidth) * 2 - 1;
+    mouse.y = -(y / event.target.clientHeight) * 2 + 1;
+
+    /*
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
-    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    mouse.y = -(event.clientY / (window.innerHeight)) * 2 + 1;
+    */
+    //console.log(mouse);
     raycaster.setFromCamera(mouse, camera);
     var intersects = raycaster.intersectObject(scene, true);
     if (intersects.length > 0) {
@@ -188,7 +210,7 @@ function createJSON(objectArray) {
 
     objectArray.forEach((object) => {
         const real_pos = get2DCoords(C, object.position);
-        if (object.userData.intersection == null) intersection_pos = real_pos;
+        //if (object.userData.intersection == null) intersection_pos = real_pos;
         const intersection_pos = get2DCoords(C, object.userData.intersection);
         json.push({
             name: object.name,

diff --git a/main.js b/main.js
@@ -12,6 +12,7 @@ import { setScene } from "./inspect.js";
 THREE.Cache.enabled = true;
 
 const scene = new THREE.Scene();
+window.scene = scene; // debug from console
 scene.background = new THREE.Color(0xdadada);
 
 const camera = new THREE.PerspectiveCamera(
@@ -25,7 +26,7 @@ camera.position.set(5, 5, 5);
 const renderer = new THREE.WebGLRenderer({
     antialias: true,
 });
-renderer.setSize(window.innerWidth, window.innerHeight - 25);
+renderer.setSize(window.innerWidth, window.innerHeight - 25, false); // -25 to avoid scroll bar
 document.body.appendChild(renderer.domElement);
 
 const controls = new OrbitControls(camera, renderer.domElement);
@@ -55,6 +56,12 @@ scene.add(axesHelper);
 
 createPanel();
 
+await loadImages(
+    scene,
+    "out-files/MNAC-AbsidiolaSud/MNAC-AbsSud-CamerasList-converted.lst",
+    "out-files/MNAC-AbsidiolaSud/MNAC-AbsSud-CamerasRegistration.out"
+);
+
 //MODEL LOADER
 const gltfLoader = new GLTFLoader();
 //gltfLoader.load("models/pedret10/MNAC-AbsSud-LowPoly.glb", (object) => {
@@ -77,32 +84,31 @@ gltfLoader.load("models/pedret/pedret_XII_text4K.glb", (object) => {
         0.0,
         1.0
     );
-    const pos = new THREE.Vector3().setFromMatrixPosition(matrix);
-    const scale = new THREE.Vector3().setFromMatrixScale(matrix);
-    const rotation = new THREE.Quaternion().setFromRotationMatrix(matrix);
+    const rotMat = new THREE.Matrix4().copy(matrix);
+    rotMat.premultiply(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
+    const pos = new THREE.Vector3().setFromMatrixPosition(rotMat);
+    const scale = new THREE.Vector3().setFromMatrixScale(rotMat);
+    const rotation = new THREE.Quaternion().setFromRotationMatrix(rotMat);
 
     console.log(object.scene);
 
     object.scene.position.copy(pos);
     object.scene.scale.copy(scale);
     object.scene.quaternion.copy(rotation);
-
     object.scene.name = "model";
-
+    //console.log("Before:", object.scene.matrixWorld);
+    /*
     const wrapper = new THREE.Object3D();
-    wrapper.name = "model";
+    wrapper.name = "wrapper";
     wrapper.add(object.scene);
-    wrapper.rotateX(-Math.PI / 2);
-
-    scene.add(wrapper);
+    //wrapper.rotateX(-Math.PI / 2);
+    scene.add(wrapper);*/
+    scene.add(object.scene);
+    //setIntersectionPosition(object.scene);
     setIntersectionPosition(scene);
 });
 
-await loadImages(
-    scene,
-    "out-files/MNAC-AbsidiolaSud/MNAC-AbsSud-CamerasList-converted.lst",
-    "out-files/MNAC-AbsidiolaSud/MNAC-AbsSud-CamerasRegistration.out"
-);
+
 
 addInteraction(camera, scene, controls);
 
@@ -131,4 +137,4 @@ function render() {
 
 animate();
 
-export { render };
+export { render, renderer };
diff --git a/multiple-image-loader.js b/multiple-image-loader.js
@@ -24,7 +24,7 @@ async function loadImages(scene, images_file, cameras_file) {
     const out_file_loader = new THREE.FileLoader();
     out_file_loader.load(cameras_file, function (data) {
         const lines = data.split("\n");
-        const num_cameras = lines[1].split(" ")[0];
+        const num_cameras = lines[1].split(" ")[0]; // TODO
 
         for (let i = 0; i < num_cameras; i++) {
             const line_number = 2 + 5 * i;
@@ -34,13 +34,17 @@ async function loadImages(scene, images_file, cameras_file) {
 
             const focalLength = lines[line_number].split(" ").map(parseFloat)[0];
             const zoom = math.sqrt(focalLength / min_focal);
+            //zoom *= 2; // TODO testing
 
             const R = math.matrix([
                 lines[line_number + 1].split(" ").map(parseFloat),
                 lines[line_number + 2].split(" ").map(parseFloat),
                 lines[line_number + 3].split(" ").map(parseFloat),
             ]);
             const t = math.matrix(lines[line_number + 4].split(" ").map(parseFloat));
+
+            //if (!image_list[i].includes("0098")) continue; // TODO
+
             loadImage(scene, R, t, zoom, image_list[i], image_loader);
         }
     });

diff --git a/openseadragon.html b/openseadragon.html
@@ -8,12 +8,10 @@
 
 <div class="container">
     <div id="ui">
-        <a id="home"><i class="fa-solid fa-camera"></i> Center camera</a>
-        <a id="zoom-in"><i class="fas fa-magnifying-glass-plus"></i> Zoom In</a>
-        <a id="zoom-out"><i class="fas fa-magnifying-glass-minus"></i> Zoom Out</a>
-        <a id="full-page"><i class="fa-solid fa-expand"></i> Full Screen</a>
-        <a id="invert-zoom" href="javascript:invertZoom()" title="Increase details"
-            ><i class="fa-solid fa-up-right-and-down-left-from-center"></i> Increase Deatils</a
+        <a id="home" href="javascript:,"><i class="fa-solid fa-camera"></i> Reset camera</a>
+        <a id="full-page" href="javascript:,"><i class="fa-solid fa-expand"></i> Full Screen</a>
+        <a id="invert-zoom" href="javascript:invertZoom()" title="Increase details">
+            <i class="fa-solid fa-up-right-and-down-left-from-center"></i> Increase Details</a
         >
         <a
             id="regular-zoom"
@@ -26,15 +24,18 @@
             id="real-position"
             style="display: none"
             href="javascript:togglePosition()"
-            title="Set real position"
-            ><i class="fa-solid fa-location-dot"></i> Set real position</a
+            title="Use camera positions"
+            ><i class="fa-solid fa-location-dot"></i> Use camera positions</a
         >
-        <a
-            id="intersection-position"
-            href="javascript:togglePosition()"
-            title="Set intersection position"
-            ><i class="fa-solid fa-location-dot"></i> Set intersection position</a
+        <a id="intersection-position" href="javascript:togglePosition()" title="Use camera targets"
+            ><i class="fa-solid fa-location-dot"></i> Use camera targets</a
         >
+        <a id="distribute" href="javascript:distrib()" title="Distribute"
+            ><i class="fa-solid fa-expand"></i> Distribute
+        </a>
+        <a id="overlap" style="display: none" href="javascript:distrib()" title="Overlap"
+            ><i class="fa-solid fa-compress"></i> Overlap
+        </a>
     </div>
     <div id="openseadragon1" style="width: 100vm"></div>
 </div>

diff --git a/openseadragon.js b/openseadragon.js
@@ -8,6 +8,7 @@ const parsedImages = JSON.parse(retrievedObject);
 var overlapping;
 var regularZoom = true;
 var realPosition = true;
+var overlappingSet = false;
 
 console.log(mode);
 console.log(image);
@@ -37,8 +38,6 @@ if (mode === "single") {
 }
 
 var viewer = OpenSeadragon({
-    zoomInButton: "zoom-in",
-    zoomOutButton: "zoom-out",
     homeButton: "home",
     fullPageButton: "full-page",
 
@@ -48,13 +47,14 @@ var viewer = OpenSeadragon({
 
     showNavigator: true,
     preserveViewport: true,
+    maxZoomPixelRatio: 3, // for videos
 });
 
 viewer.zoomPerClick = 1;
 
 viewer.addHandler("open", function () {
     if (mode === "single" || parsedImages.size == 1) return;
-    distribute(parsedImages);
+    //distribute(parsedImages); // testing
 });
 
 viewer.addHandler("canvas-click", function (event) {
@@ -84,7 +84,25 @@ viewer.addHandler("canvas-click", function (event) {
     }
 });
 
+function distrib() {
+    if (mode === "single" || parsedImages.size == 1) return;
+    overlappingSet = !overlappingSet;
+
+    if (overlappingSet) {
+        document.getElementById("overlap").style.display = "inline";
+        document.getElementById("distribute").style.display = "none";
+    } else {
+        document.getElementById("overlap").style.display = "none";
+        document.getElementById("distribute").style.display = "inline";
+    }
+
+    recalculate();
+    distribute(parsedImages);
+}
+
 function distribute(images) {
+    if (!overlappingSet) return;
+    //return;  // TODO
     overlapping = true;
     for (let i = 0; overlapping; i++) {
         console.log("i: " + i);
@@ -128,6 +146,12 @@ function getIntersection(a, b) {
     var right = min(getRight(a), getRight(b));
     var bottom = max(getBottom(a), getBottom(b));
 
+    const margin = 0.01;
+    left -= margin;
+    right += margin;
+    top += margin;
+    bottom -= margin;
+
     if (bottom < top && right > left) {
         return {
             top: top,
@@ -143,8 +167,9 @@ function getIntersection(a, b) {
 }
 
 function moveImage(a, output, i) {
-    a.x += output.x;
-    a.y += output.y;
+    const speed = 1.0; // testing
+    a.x += output.x * speed;
+    a.y += output.y * speed;
     var item = viewer.world.getItemAt(i);
     item.setPosition(new OpenSeadragon.Point(a.x - getWidth(a) / 2, a.y - getHeight(a) / 2));
 }
@@ -178,6 +203,9 @@ function togglePosition() {
 }
 
 function recalculate() {
+    console.log(
+        "Recalculating. Real position: " + realPosition + ". Regular zoom: " + regularZoom + "."
+    );
     for (let i = 0; i < parsedImages.length; i++) {
         const a = parsedImages[i];
         var item = viewer.world.getItemAt(i);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "dependencies": {
     "mathjs": "^12.3.1",
-    "three": "^0.161.0"
+    "three": "^0.165.0",
+    "three-mesh-bvh": "^0.7.5"
   },
   "devDependencies": {
     "vite": "^5.0.12"