nicolo/scaenae
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: nicolo:grouped-menu
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates
..
compare: nicolo:28a34905c7d5dd19a4c7948faa3612a35939393d
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates

19 Commits
grouped-me ... 28a34905c7

Author SHA1 Message Date
Nicolò P.
28a34905c7 Minor adjustments 2026-06-10 09:24:42 +02:00
Nicolò P.
8aa3f7cde8 WIP ontology tree in menu 2026-06-10 09:18:03 +02:00
Nicolò P.
0c3a049d12 Rename js to src 2026-05-21 13:25:17 +02:00
Nicolò P.
3305e74776 Add fullscreen option 2026-05-21 13:19:11 +02:00
Nicolò P.
8ce7492f4e Minor changes 2026-05-21 13:03:32 +02:00
Nicolò P.
03b9b9157b Change pano again... 2026-05-21 12:28:23 +02:00
Nicolò P.
eb7efbf616 Style toolbar 2026-05-21 11:42:52 +02:00
Nicolò P.
b80504aec4 Reduce default lighting a bit 2026-05-21 11:23:40 +02:00
Nicolò P.
db2fc2d066 Change pano 2026-05-21 10:38:35 +02:00
Nicolò P.
491371e495 Change default env settings 2026-05-21 10:35:59 +02:00
Nicolò P.
fc4dd8af62 Try different semantic material 2026-05-21 09:47:32 +02:00
Nicolò P.
c837a6e55f Add modal controller 2026-05-21 09:36:25 +02:00
Nicolò P.
4dccd58bf3 ATON utils + optimize image asset 2026-05-21 09:30:25 +02:00
Nicolò P.
9a0d769e0f Sample semantic modal 2026-05-20 20:34:46 +02:00
Nicolò P
55f10e62d9 Listen for ATON Tap event 2026-05-20 18:32:07 +02:00
Nicolò P
b90d1614e9 Semantic node on 'palcoscenico' 2026-05-20 14:16:01 +02:00
Nicolò P
f5f105e786 Test semantic node 2026-05-20 11:45:51 +02:00
Nicolò P.
aa9a6f56b6 clipping: Fix wrong AO handling 2026-05-19 07:49:40 +02:00
Nicolò P.
106841f6ef Disable colors + restore clipping 2026-05-19 07:40:45 +02:00
25 changed files with 3220 additions and 111 deletions
Expand all files Collapse all files

BIN
assets/img/rilievo_ssgp_bezzi.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 136 KiB

BIN
assets/pano/hemi-green.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

29
config.js
View File

@@ -16,16 +16,13 @@ const theater2Popup = `
export const config = { export const config = {
scene : { scene : {
initialExposure: 0.85, initialExposure: 1.2,
autoLP: false, autoLP: false,
shadows: false, shadows: false,
initLightDir: [0.2,-0.3,-0.7], initLightDir: [-0.3,-0.7,0.1],
initRotation: [0, 1.5, 0], initRotation: [0, 190, 0],
ambientOcclusion: false, ambientOcclusion: false,
}, },
menu : {
//audioBtn1
},
markers : [ markers : [
{ {
id : "salvador", id : "salvador",
@@ -49,12 +46,6 @@ export const config = {
nodes: { nodes: {
label: 'Teatro', label: 'Teatro',
children: [ children: [
/*
{
label: 'Struttura complessiva',
model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
},
*/
{ {
label: 'Involucro', label: 'Involucro',
model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb', model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
@@ -111,6 +102,16 @@ export const config = {
{ {
label: 'Palcoscenico', label: 'Palcoscenico',
model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb', model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
isSemantic: true,
// TEMP
content: {
type: 'img',
imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.webp',
title: 'Disegno della pianta del teatro SS. Giovanni e Paolo',
description: `
Tommaso Bezzi: Disegno della pianta del teatro di SS. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
`
}
}, },
{ {
label: 'Boccascena / Proscenio', label: 'Boccascena / Proscenio',
@@ -162,11 +163,11 @@ export const config = {
} }
] ]
}, },
pano: `pano/gradient.jpg`, pano: `pano/hemi-green.jpg`,
} }
], ],
map : { map : {
center: [45.30833, 12.240278], center: [45.42833, 12.340278],
initialZoom : 12, initialZoom : 12,
minZoom : 6, minZoom : 6,
maxZoom : 18 maxZoom : 18

2
index.html
View File

@@ -51,7 +51,7 @@
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script> <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
<!-- Main js entry --> <!-- Main js entry -->
<script type="module" src="js/main.js"></script> <script type="module" src="src/main.js"></script>
</head> </head>
<body data-bs-theme="light"> <body data-bs-theme="light">

43
js/ontology.js
View File

@@ -1,43 +0,0 @@
/**
* @module Ontology
*/
/**
* @todo Temporarily returns domains and ontology labels only
* Traverse an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function traverseOntology(jsonPath) {
const ontology = await loadOntology(jsonPath);
const domains = [];
for (const k of Object.keys(ontology)) {
if (k === 'domains') {
for (const domainKey of Object.keys(ontology[k])) {
domains.push({
label: domainKey,
child: ontology[k][domainKey][0].label,
});
}
}
}
return {
ontology: ontology.ontology,
domains
};
}
/**
* Load an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function loadOntology(jsonPath) {
const ontology = await fetch(jsonPath)
.then(res => res.json())
.catch(err => console.error(err));
return ontology;
}

2922
scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json Normal file
View File

File diff suppressed because it is too large Load Diff

10
scenes/salvador/index.js
View File

@@ -1,8 +1,8 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.js"; import { config } from "../../config.js";
import AppState from "../../js/state.js"; import AppState from "../../src/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js"; import { normalizeNodes } from "../../src/utils/nodeUtils.js";
import { initStimulus } from "../../js/utils/stimulus.js"; import { initStimulus } from "../../src/utils/stimulus.js";
initStimulus(); initStimulus();
@@ -10,6 +10,4 @@ AppState.currentScene = 'salvador';
const marker = config.markers.find(m => m.id === 'salvador'); const marker = config.markers.find(m => m.id === 'salvador');
AppState.normalizedNodes = normalizeNodes(marker.nodes).flat; AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
console.debug(AppState.normalizedNodes);
openScene(marker, AppState.normalizedNodes); openScene(marker, AppState.normalizedNodes);

53
scenes/ssgp/index.html
View File

@@ -58,30 +58,36 @@
<script type="module" src="./index.js"></script> <script type="module" src="./index.js"></script>
</head> </head>
<body data-bs-theme="light" data-controller="menu"> <body data-bs-theme="light" data-controller="menu modal" data-action="semantic-modal-show@document->modal#showSemanticModal">
<div id="toolbar" class="aton-toolbar-top w-100" <div id="toolbar" class="aton-toolbar-top w-100"
data-controller="toolbar clipper" data-clipper-enabled-value="false"> data-controller="toolbar clipper" data-clipper-enabled-value="false">
<a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa"> <div class="bg-dark-subtle position-absolute opacity-50 mt-1 ms-1 rounded">
<i class="bi bi-map-fill"></i> <a class="btn aton-btn fs-5 p-1 text-white" href="/a/scaenae" id="back" title="Torna alla mappa">
</a> <i class="bi bi-map-fill"></i>
<a class="btn aton-btn fs-5" title="Impostazioni" data-toolbar-target="settings" </a>
data-action="toolbar#toggleSettings"> <a class="btn aton-btn fs-5 p-1 text-white" title="Impostazioni" data-toolbar-target="settings"
<i class="bi bi-gear-fill"></i> data-action="toolbar#toggleSettings">
</a> <i class="bi bi-gear-fill"></i>
<a class="btn aton-btn fs-5" title="Attiva / disattiva sezionamento" </a>
data-clipper-target="trigger" data-action="clipper#toggleClipper"> <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva / disattiva sezionamento"
<i class="bi bi-scissors"></i> data-clipper-target="trigger" data-action="clipper#toggleClipper">
</a> <i class="bi bi-scissors"></i>
</a>
<a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
data-action="toolbar#toggleFullscreen">
<i class="bi bi-fullscreen"></i>
</a>
</div>
<div class="d-none w-25 <div class="d-none w-25
position-absolute position-absolute
top-0 start-50 top-0 start-50
translate-middle bg-light translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50 px-4 pt-2 pb-2 bg-opacity-75
rounded-bottom-3 rounded-bottom-3
mt-4 text-dark text-center" mt-4 text-dark text-center"
id="clipper-bar" id="clipper-bar"
data-clipper-target="clipper"> data-clipper-target="clipper">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span> <span class="pt-5 pb-2 d-block fw-bold">Sezione</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button> data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
@@ -89,7 +95,7 @@
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" <button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button> data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
</div> </div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu" <a class="btn aton-btn fs-5 float-end p-1 mt-1 text-white" id="menu" title="Menu"
data-menu-target="trigger" data-action="menu#toggleMenu"> data-menu-target="trigger" data-action="menu#toggleMenu">
<i class="bi bi-list"></i> <i class="bi bi-list"></i>
</a> </a>
@@ -157,8 +163,21 @@
</div> </div>
</template> </template>
<!-- TODO CSS-only popover --> <!-- TODO Make it a template -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div> <div class="modal" id="semanticModal" tabindex="-1" data-modal-target="modal">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="aton-poweredby" > <div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a> <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>

11
scenes/ssgp/index.js
View File

@@ -1,8 +1,9 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.js"; import { config } from "../../config.js";
import AppState from "../../js/state.js"; import AppState from "../../src/state.js";
import { normalizeNodes } from "../../js/utils/nodeUtils.js"; import { normalizeNodes } from "../../src/utils/nodeUtils.js";
import { initStimulus } from "../../js/utils/stimulus.js"; import { initStimulus } from "../../src/utils/stimulus.js";
import { initAtonEvents } from "../../src/utils/aton.js";
initStimulus(); initStimulus();
@@ -15,3 +16,5 @@ AppState.treeNodes = tree;
// TODO: add Map object for lookup optimization // TODO: add Map object for lookup optimization
openScene(marker, AppState.normalizedNodes); openScene(marker, AppState.normalizedNodes);
initAtonEvents();

6
js/controllers/clipper_controller.js → src/controllers/clipper_controller.js
View File

@@ -56,16 +56,16 @@ export default class extends Controller {
btn.classList.remove('border', 'border-2', 'border-warning'); btn.classList.remove('border', 'border-2', 'border-warning');
}); });
// AO should be turned off if clipping is enabled
toggleAmbientOcclusion(!this.enabledValue);
if (this.enabledValue) { if (this.enabledValue) {
// AO should be turned off if clipping is enabled
toggleAmbientOcclusion(false);
trigger.className += ' border border-2 border-white'; trigger.className += ' border border-2 border-white';
} }
if (!this.enabledValue) { if (!this.enabledValue) {
resetClipping(); resetClipping();
trigger.className = trigger.className.replace(/ border.*$/g, ''); trigger.className = trigger.className.replace(/ border.*$/g, '');
toggleAmbientOcclusion(AppState.ambientOcclusion);
} }
AppState.clipping.enabled = this.enabledValue; AppState.clipping.enabled = this.enabledValue;

34
js/controllers/menu_controller.js → src/controllers/menu_controller.js
View File

@@ -6,7 +6,7 @@ import { traverseOntology } from "../ontology.js";
const html = String.raw; const html = String.raw;
const domParser = new DOMParser; const domParser = new DOMParser;
// TODO: hard-coded, but follows a convention... // TODO: hard-coded, but follows a convention...
const ontologyJsonPath = location.pathname + 'ontology.json'; const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json';
export default class extends Controller { export default class extends Controller {
static targets = ['trigger', 'layers', 'ontology']; static targets = ['trigger', 'layers', 'ontology'];
@@ -193,6 +193,7 @@ export default class extends Controller {
<i class="bi bi-chevron-down me-1"></i>${node.id} <i class="bi bi-chevron-down me-1"></i>${node.id}
`; `;
// Add color "swatch" only for first level groups // Add color "swatch" only for first level groups
/*
if (node.depth === 2) { if (node.depth === 2) {
trigger.innerHTML += html` trigger.innerHTML += html`
<div class="d-inline-block border rounded ms-2" <div class="d-inline-block border rounded ms-2"
@@ -200,6 +201,7 @@ export default class extends Controller {
</div> </div>
`; `;
} }
*/
const collapseDiv = document.createElement('div'); const collapseDiv = document.createElement('div');
collapseDiv.className = 'collapse'; collapseDiv.className = 'collapse';
@@ -227,24 +229,26 @@ export default class extends Controller {
* @param {HTMLElement} tab Tab content element * @param {HTMLElement} tab Tab content element
*/ */
#buildOntologyMenu(ontology, tab) { #buildOntologyMenu(ontology, tab) {
console.debug(ontology);
const mainNode = tab.querySelector('#ontology-list'); const mainNode = tab.querySelector('#ontology-list');
mainNode.textContent = ontology.ontology; mainNode.innerHTML = html`
<span class="fs-5 fw-bold">${ontology.ontology}</span>
let domainList = html`
<ul class="list-group mt-2" id="domains-list"></ul>
`; `;
mainNode.classList.add('pb-3');
// Very fragile and ugly!! let domainList = document.createElement('div');
mainNode.innerHTML += domainList;
domainList = tab.querySelector('#domains-list');
for(let domain of ontology.domains) { for (let domain of ontology.domains) {
const domainItem = html` const domainItem = document.createElement('div');
<li class="list-group-item">${domain.label}</li> domainItem.className = 'border-start border-bottom rounded';
`; domainItem.textContent = domain.label;
domainList.innerHTML += domainItem; // Indentation...
domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
if (domain.depth === 1) domainItem.classList.add('fw-bold');
domainList.appendChild(domainItem);
} }
mainNode.appendChild(domainList);
} }
} }

41
src/controllers/modal_controller.js Normal file
View File

@@ -0,0 +1,41 @@
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static targets = ['modal'];
connect() {
console.log('#modal controller connected');
}
/**
*
* @param {Event} event
*/
showSemanticModal(event) {
const modal = this.modalTarget;
const title = modal.querySelector('.modal-title');
// Clear any existing content first
title.innerHTML = '';
title.innerHTML = event.content?.title;
const body = modal.querySelector('.modal-body');
body.innerHTML = '';
const contentType = event.content?.type;
const content = document.createElement(contentType);
if (contentType === 'img') {
content.src = event.content?.imgSrc;
content.alt = event.content?.description.trim();
content.classList.add('img-fluid');
}
body.appendChild(content);
const description = document.createElement('p');
description.textContent = event.content?.description.trim();
description.classList.add('py-3', 'my-0', 'fst-italic');
body.appendChild(description);
bootstrap.Modal.getOrCreateInstance(modal).show();
}
}

0
js/controllers/settings_controller.js → src/controllers/settings_controller.js
View File

0
js/controllers/tabs_controller.js → src/controllers/tabs_controller.js
View File

20
js/controllers/toolbar_controller.js → src/controllers/toolbar_controller.js
View File

@@ -9,7 +9,7 @@ const panelHeader = html`
`; `;
export default class extends Controller { export default class extends Controller {
static targets = ['settings']; static targets = ['settings', 'fullscreen'];
connect() { connect() {
console.log('#toolbar controller connected'); console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
ATON.UI.showSidePanel({header: panelHeader}); ATON.UI.showSidePanel({header: panelHeader});
this.#buildSettingsPanel(ATON.UI.elSidePanel); this.#buildSettingsPanel(ATON.UI.elSidePanel);
} }
toggleFullscreen() {
/**
* @type {HTMLAnchorElement}
*/
const target = this.fullscreenTarget;
const icon = target.querySelector('i');
if (!document.fullscreenElement) {
document.body.requestFullscreen();
icon.classList.remove('bi-fullscreen');
icon.classList.add('bi-fullscreen-exit');
target.title = 'Esci da schermo intero';
} else {
document.exitFullscreen();
icon.classList.remove('bi-fullscreen-exit');
icon.classList.add('bi-fullscreen');
target.title = 'Attiva schermo intero';
}
}
/** /**
* Clone a <template> by id * Clone a <template> by id
* @param {String} id * @param {String} id

0
js/main.js → src/main.js
View File

0
js/map.js → src/map.js
View File

69
src/ontology.js Normal file
View File

@@ -0,0 +1,69 @@
/**
* @module Ontology
*/
/**
* @todo Temporarily returns domains and ontology labels only
* Traverse an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function traverseOntology(jsonPath) {
const ontology = await loadOntology(jsonPath);
const modules = ontology.modules;
let tree = [];
for (const module of modules) {
if (module.id === 'Architecture') {
console.debug(module.classTrees);
for (const classTree of module.classTrees) {
traverseClasses(classTree, tree);
}
}
}
return {
ontology: "Architecture",
domains: tree
};
}
/**
*
* @param {Object} ontologyClass
* @param {Array<Object>} tree
* @param {Number} depth
*/
function traverseClasses(ontologyClass, tree, depth = 1) {
const ontologyNode = {
id: ontologyClass.id,
label: ontologyClass.label,
depth,
children: [],
};
tree.push(ontologyNode);
if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
for(const child of ontologyClass.children) {
ontologyNode.children.push(
traverseClasses(child, tree, depth + 1)
);
}
}
}
/**
* Load an ontology from its JSON description
* @param {String} jsonPath The path (URI) of the ontology JSON file
* @returns {Object}
*/
export async function loadOntology(jsonPath) {
const ontology = await fetch(jsonPath)
.then(res => res.json())
.catch(err => console.error(err));
return ontology;
}

42
js/scene.js → src/scene.js
View File

@@ -37,7 +37,6 @@ function init () {
ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir)); ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
ATON.toggleShadows(config.scene.shadows); ATON.toggleShadows(config.scene.shadows);
ATON.setExposure(config.scene.initialExposure); ATON.setExposure(config.scene.initialExposure);
// Open settings side panel when clicking on settings btn
AppState.camera = ATON.Nav._camera; AppState.camera = ATON.Nav._camera;
AppState.renderer = ATON._renderer; AppState.renderer = ATON._renderer;
@@ -46,6 +45,8 @@ function init () {
AppState.exposure = config.scene.initialExposure; AppState.exposure = config.scene.initialExposure;
ATON.Nav.setUserControl(true); ATON.Nav.setUserControl(true);
// Avoid semantic occlusion
ATON._bQuerySemOcclusion = false;
} }
/** /**
* @param {Object} marker - The marker object from config * @param {Object} marker - The marker object from config
@@ -79,10 +80,12 @@ function loadNodes(nodes) {
node.load(n.model); node.load(n.model);
node.setRotation(...config.scene.initRotation); node.setRotation(...config.scene.initRotation);
/*
node.setMaterial(new THREE.MeshPhongMaterial({ node.setMaterial(new THREE.MeshPhongMaterial({
transparent: false, transparent: false,
color: n.color ?? '#fff', color: n.color ?? '#fff',
})); }));
*/
// Apply any transparency before attaching to scene // Apply any transparency before attaching to scene
if (n.opacity !== undefined && n.opacity !== null) { if (n.opacity !== undefined && n.opacity !== null) {
@@ -104,10 +107,45 @@ function loadNodes(nodes) {
AppState.clipping.boundingSphere = node.getBound(); AppState.clipping.boundingSphere = node.getBound();
} }
AppState.nodes.push({id: n.label, active: n.isInvisible ? false: true}); if (n.isSemantic) {
createSemanticNode(n.model, n.label);
AppState.semanticNodes.set(n.label, n.content);
//ATON.getSemanticRoot().attach(semNode);
}
AppState.nodes.push({
id: n.label,
active: n.isInvisible ? false: true,
isSemantic: n.isSemantic
});
}); });
if (!AppState.clipping.boundingSphere) { if (!AppState.clipping.boundingSphere) {
console.error("No bounding sphere computed, clipping will fail. Ensure one node has 'isMain: true'."); console.error("No bounding sphere computed, clipping will fail. Ensure one node has 'isMain: true'.");
} }
} }
/**
* Creates a semantic annotation from a model
* @param {string} model The model's path to load
* @param {string} id The original scene node ID (3D object)
* @returns {ATON.SceneNode}
*/
function createSemanticNode(model, id) {
// Default/highlight materials for semantic node
let matSemDef = new THREE.MeshStandardMaterial({
color: '#f7e6af',
transparent: true,
opacity: 0.2,
});
let matSemHL = ATON.MatHub.materials.semanticShapeHL;
const semNode = ATON.createSemanticNode(id)
.setCloneOnLoadHit(false)
.load(model)
.setDefaultAndHighlightMaterials(matSemDef, matSemHL)
.attachToRoot();
semNode.setRotation(...config.scene.initRotation);
return semNode;
}

1
js/state.js → src/state.js
View File

@@ -24,6 +24,7 @@ let AppState = {
*/ */
normalizedNodes: [], normalizedNodes: [],
treeNodes: {}, treeNodes: {},
semanticNodes: new Map,
mainNodeId: null, mainNodeId: null,
currentScene: null, currentScene: null,
sceneHasAudio: false, sceneHasAudio: false,

38
src/utils/aton.js Normal file
View File

@@ -0,0 +1,38 @@
// Global ATON
import AppState from "../state.js";
/**
* @module AtonUtils
*/
/**
* Initializes required ATON events for interactions
* with semantic nodes
*/
export function initAtonEvents() {
// General hover/leave events handling for all semantic nodes.
ATON.on("SemanticNodeHover", (semid) => {
let node = ATON.getSemanticNode(semid);
if (node) node.highlight();
});
ATON.on("SemanticNodeLeave", (semid) => {
let node = ATON.getSemanticNode(semid);
if (node) node.restoreDefaultMaterial();
});
// Triggers on mouse click / tap events
ATON.on("Tap", (e) => {
let node = ATON.getHoveredSemanticNode();
if (node) {
// Retrieve semantic node from AppState to trigger a modal with its content
const content = AppState.semanticNodes.get(node.nid);
// Triggers a modal to show the content (listened by Stimulus)
const event = new Event('semantic-modal-show');
event.content = content;
document.dispatchEvent(event);
}
});
}

6
js/utils/clipping.js → src/utils/clipping.js
View File

@@ -31,14 +31,12 @@ function createClippingPlaneMesh (boundingSphere) {
* @param {String} axis * @param {String} axis
*/ */
function dragClipper (planeMesh, axis) { function dragClipper (planeMesh, axis) {
const controls = new THREE.TransformControls( const controls = new THREE.DragControls(
[planeMesh],
ATON.Nav._camera, ATON.Nav._camera,
ATON._renderer.domElement, ATON._renderer.domElement,
); );
controls.attach(planeMesh);
controls.setMode('translate');
const startPosition = new THREE.Vector3(); const startPosition = new THREE.Vector3();
// Only move along the selected axis (exlude the others) // Only move along the selected axis (exlude the others)
const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis); const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);

0
js/utils/environment.js → src/utils/environment.js
View File

0
js/utils/nodeUtils.js → src/utils/nodeUtils.js
View File

2
js/utils/stimulus.js → src/utils/stimulus.js
View File

@@ -3,6 +3,7 @@ import SettingController from '../controllers/settings_controller.js';
import ToolbarController from '../controllers/toolbar_controller.js'; import ToolbarController from '../controllers/toolbar_controller.js';
import ClipperController from '../controllers/clipper_controller.js'; import ClipperController from '../controllers/clipper_controller.js';
import MenuController from '../controllers/menu_controller.js'; import MenuController from '../controllers/menu_controller.js';
import ModalController from '../controllers/modal_controller.js';
/** /**
* Initialize Stimulus controllers * Initialize Stimulus controllers
@@ -13,4 +14,5 @@ export function initStimulus() {
Stimulus.register("toolbar", ToolbarController); Stimulus.register("toolbar", ToolbarController);
Stimulus.register("clipper", ClipperController); Stimulus.register("clipper", ClipperController);
Stimulus.register("menu", MenuController); Stimulus.register("menu", MenuController);
Stimulus.register("modal", ModalController);
} }