Skip to content

Commit

Permalink
Enable sphere in inspect mode
Browse files Browse the repository at this point in the history
  • Loading branch information
BernatBC committed Jun 8, 2024
1 parent 397c60d commit e60735d
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 4 deletions.
123 changes: 123 additions & 0 deletions inspect.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import * as THREE from "three";
import { getAllImages } from "./single-image-loader";

import { create, all } from "mathjs";

const math = create(all, {});

var scene;
var spheres = [];
var cylinders = [];
var planes = [];

const HOVER_COLOR = 0x66aaaa;
const NORMAL_COLOR = 0xaaaaaa;

function setScene(s) {
scene = s;
}

function saveSphere(C, radius) {
const geometry = new THREE.SphereGeometry(0.05, 10, 10);
const material = new THREE.MeshBasicMaterial({
color: 0xaaaaaa,
});
const sphereObject = new THREE.Mesh(geometry, material);

scene.add(sphereObject);

sphereObject.position.set(C.x, C.y, C.z);
sphereObject.userData.radius = radius;
sphereObject.name = "Sphere" + spheres.length;
sphereObject.visible = false;

spheres.push(sphereObject);
}

function saveCylinder() {
console.log("Saving");
}

function savePlane() {
console.log("Saving");
}

function setFiguresVisibility(show) {
if (spheres.length > 0) spheres.forEach((s) => (s.visible = show));
}

function openFigure(objects) {
let object = firstFigure(objects);
if (!object) return;
if (spheres.length > 0)
spheres.forEach((s) => {
if (s.name == object.name) openSphericalImages(s.position, s.userData.radius);
console.log("a");
});
}

function hoveringFigure(objects) {
let object = firstFigure(objects);
if (!object) object = { name: "" };
if (spheres.length > 0)
spheres.forEach((s) => {
if (s.name == object.name) s.material.color.setHex(HOVER_COLOR);
else s.material.color.setHex(NORMAL_COLOR);
});
}

function firstFigure(objects) {
for (let i = 0; i < objects.length; i++) {
const o = objects[i];
if (o.object.name.startsWith("Sphere")) return o.object;
}
return null;
}

function openSphericalImages(C, radius) {
let images = getAllImages();
let json = [];

images.forEach((object) => {
let P_inter = object.userData.intersection;
let P_real = object.position;
if (P_inter == null) return;
if (C.distanceTo(P_real) < radius) {
const real_pos = getSphere2DCoords(P_real, C);
const inter_pos = getSphere2DCoords(P_inter, C);
json.push({
name: object.name,
x_real: real_pos.x,
y_real: real_pos.y,
x_inter: inter_pos.x,
y_inter: inter_pos.y,
isLandscape: object.userData.isLandscape,
heightToWidthRatio: object.userData.heightToWidthRatio,
zoom: object.userData.zoom,
});
}
});

let jsonContent = JSON.stringify(json);
localStorage.setItem("images", jsonContent);
const url = "openseadragon.html?mode=spherical";

window.open(url, "_blank");
}

function getSphere2DCoords(P, C) {
const V = new THREE.Vector3().subVectors(P, C).normalize();
const phi = math.acos(V.y);
const theta = math.atan2(V.x, V.z);
return { x: theta, y: phi };
}

export {
saveSphere,
saveCylinder,
savePlane,
setFiguresVisibility,
setScene,
openFigure,
hoveringFigure,
};
21 changes: 20 additions & 1 deletion interaction.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
setMultiSettings,
resetUI,
} from "./panel.js";
import { openFigure, hoveringFigure } from "./inspect.js";

import { create, all } from "mathjs";

const math = create(all, {});
Expand All @@ -24,6 +26,7 @@ var camera;
var scene;
var controls;
var mode = "multi";
var authoringMode = true;

const HOVER_COLOR = 0xccffff;
const SELECTION_COLOR = 0xd6b4fc;
Expand Down Expand Up @@ -81,7 +84,13 @@ function onClick() {

var intersects = raycaster.intersectObject(scene, true);
if (intersects.length == 0) return;
console.log(intersects[0]);

if (!authoringMode) {
openFigure(intersects);
render();
return;
}

var object = firstImage(intersects);
if (object == null) return;

Expand Down Expand Up @@ -149,6 +158,11 @@ function onHover() {
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(scene, true);
if (intersects.length > 0) {
if (!authoringMode) {
hoveringFigure(intersects);
render();
return;
}
var object = firstImage(intersects);
if (object != null) {
// New Hover
Expand Down Expand Up @@ -229,6 +243,10 @@ function setSelectionMode(m) {
mode = m;
}

function setAuthoringMode(m) {
authoringMode = m;
}

export {
addInteraction,
openImagesToOpenSeaDragon,
Expand All @@ -238,4 +256,5 @@ export {
clearRangeImages,
paintRangeImages,
setSelectionMode,
setAuthoringMode,
};
3 changes: 3 additions & 0 deletions main.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { loadImages } from "./multiple-image-loader.js";
import { addInteraction } from "./interaction.js";
import { createPanel } from "./panel.js";
import { setIntersectionPosition } from "./single-image-loader.js";
import { setScene } from "./inspect.js";

//INIT
THREE.Cache.enabled = true;
Expand Down Expand Up @@ -105,6 +106,8 @@ await loadImages(

addInteraction(camera, scene, controls);

setScene(scene);

window.addEventListener("resize", onWindowResize, false);

function onWindowResize() {
Expand Down
44 changes: 42 additions & 2 deletions panel.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,18 @@
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
import { setSize, setOffset, setWireframe, setImageVisibility } from "./single-image-loader.js";
import { openImagesToOpenSeaDragon, clearSelection, setSelectionMode } from "./interaction.js";
import {
openImagesToOpenSeaDragon,
clearSelection,
setSelectionMode,
setAuthoringMode,
} from "./interaction.js";

import { applySphericalRadius, openSphericalImages, cancelSphere } from "./sphere.js";
import {
applySphericalRadius,
openSphericalImages,
cancelSphere,
saveSphereToInspectMode,
} from "./sphere.js";

import {
cancelPlane,
Expand All @@ -19,6 +29,8 @@ import {
applyCylindricalHeight,
} from "./cylinder.js";

import { setFiguresVisibility } from "./inspect.js";

const panel = new GUI({ width: 290 });

const mode_folder = panel.addFolder("Mode");
Expand All @@ -45,6 +57,8 @@ function createPanel() {
setSelectionMode("multi");

setImageVisibility(true);
setFiguresVisibility(false);
setAuthoringMode(true);
},
"Change to Inspect mode": function () {
showController("Mode", "Change to Authoring mode");
Expand All @@ -63,6 +77,8 @@ function createPanel() {
cancelCylinder();
clearSelection();
setImageVisibility(false);
setFiguresVisibility(true);
setAuthoringMode(false);
},
};
let settings1 = {
Expand Down Expand Up @@ -98,6 +114,7 @@ function createPanel() {
hideController("Sphere", "Create Sphere");
hideController("Sphere", "Radius");
hideController("Sphere", "Open in 2D viewer");
hideController("Sphere", "Save figure to Inspect mode");

hideFolder("Individual Selection");
hideFolder("Plane");
Expand All @@ -110,13 +127,17 @@ function createPanel() {
openSphericalImages();
},
Radius: 0.5,
"Save figure to Inspect mode": function () {
saveSphereToInspectMode();
},
Cancel: function () {
cancelSphere();

hideController("Sphere", "Cancel");
showController("Sphere", "Create Sphere");
hideController("Sphere", "Radius");
hideController("Sphere", "Open in 2D viewer");
hideController("Sphere", "Save figure to Inspect mode");

showFolder("Plane");
showFolder("Cylinder");
Expand All @@ -135,6 +156,7 @@ function createPanel() {
hideController("Plane", "Open in 2D viewer");
showController("Plane", "Cancel");
hideController("Plane", "Create Plane");
hideController("Plane", "Save figure to Inspect mode");

hideFolder("Individual Selection");
hideFolder("Sphere");
Expand All @@ -143,6 +165,9 @@ function createPanel() {
setMessage("Select 3 images");
setSelectionMode("plane");
},
"Save figure to Inspect mode": function () {
console.log("Saving plane");
},
Cancel: function () {
cancelPlane();
hideController("Plane", "Width");
Expand All @@ -151,6 +176,7 @@ function createPanel() {
hideController("Plane", "Open in 2D viewer");
hideController("Plane", "Cancel");
showController("Plane", "Create Plane");
hideController("Plane", "Save figure to Inspect mode");

showFolder("Sphere");
showFolder("Cylinder");
Expand All @@ -174,6 +200,7 @@ function createPanel() {
hideController("Cylinder", "Open in 2D viewer");
showController("Cylinder", "Cancel");
hideController("Cylinder", "Create Cylinder");
hideController("Cylinder", "Save figure to Inspect mode");

hideFolder("Individual Selection");
hideFolder("Sphere");
Expand All @@ -187,6 +214,9 @@ function createPanel() {
},
Radius: 0.5,
Height: 1.0,
"Save figure to Inspect mode": function () {
console.log("Saving cylinder");
},
Cancel: function () {
cancelCylinder();

Expand All @@ -195,6 +225,7 @@ function createPanel() {
hideController("Cylinder", "Open in 2D viewer");
hideController("Cylinder", "Cancel");
showController("Cylinder", "Create Cylinder");
hideController("Cylinder", "Save figure to Inspect mode");

showFolder("Sphere");
showFolder("Plane");
Expand All @@ -218,19 +249,22 @@ function createPanel() {
folder3.add(settings3, "Create Sphere");
folder3.add(settings3, "Radius", 0.0, 5.0, 0.01).onChange(applySphericalRadius);
folder3.add(settings3, "Open in 2D viewer");
folder3.add(settings3, "Save figure to Inspect mode");
folder3.add(settings3, "Cancel");

folder4.add(settings4, "Create Plane");
folder4.add(settings4, "Width", 0.0, 10.0, 0.01).onChange(changePlaneWidth);
folder4.add(settings4, "Height", 0.0, 10.0, 0.01).onChange(changePlaneHeight);
folder4.add(settings4, "Max distance", 0.0, 5.0, 0.01).onChange(changePlaneDistance);
folder4.add(settings4, "Open in 2D viewer");
folder4.add(settings4, "Save figure to Inspect mode");
folder4.add(settings4, "Cancel");

folder5.add(settings5, "Create Cylinder");
folder5.add(settings5, "Radius", 0.0, 5.0, 0.01).onChange(applyCylindricalRadius);
folder5.add(settings5, "Height", 0.0, 5.0, 0.01).onChange(applyCylindricalHeight);
folder5.add(settings5, "Open in 2D viewer");
folder5.add(settings5, "Save figure to Inspect mode");
folder5.add(settings5, "Cancel");

// Initialize panel
Expand All @@ -241,15 +275,18 @@ function createPanel() {
hideController("Mode", "Change to Authoring mode");
hideController("Sphere", "Radius");
hideController("Sphere", "Open in 2D viewer");
hideController("Sphere", "Save figure to Inspect mode");
hideController("Sphere", "Cancel");
hideController("Plane", "Width");
hideController("Plane", "Height");
hideController("Plane", "Max distance");
hideController("Plane", "Open in 2D viewer");
hideController("Plane", "Save figure to Inspect mode");
hideController("Plane", "Cancel");
hideController("Cylinder", "Radius");
hideController("Cylinder", "Height");
hideController("Cylinder", "Open in 2D viewer");
hideController("Cylinder", "Save figure to Inspect mode");
hideController("Cylinder", "Cancel");
}

Expand Down Expand Up @@ -305,6 +342,7 @@ function setSphereSettings() {
hideController("Sphere", "Create Sphere");
showController("Sphere", "Radius");
showController("Sphere", "Open in 2D viewer");
showController("Sphere", "Save figure to Inspect mode");

setMessage("");
}
Expand All @@ -315,6 +353,7 @@ function setCylinderSettings() {
showController("Cylinder", "Open in 2D viewer");
showController("Cylinder", "Cancel");
hideController("Cylinder", "Create Cylinder");
showController("Cylinder", "Save figure to Inspect mode");

setMessage("");
}
Expand All @@ -326,6 +365,7 @@ function setPlaneSettings() {
showController("Plane", "Open in 2D viewer");
showController("Plane", "Cancel");
hideController("Plane", "Create Plane");
showController("Plane", "Save figure to Inspect mode");

setMessage("");
}
Expand Down
Loading

0 comments on commit e60735d

Please sign in to comment.