Sample semantic modal

config.js

@@ -16,7 +16,7 @@ const theater2Popup = `
 
 export const config = {
     scene : {
-        initialExposure: 0.85,
+        initialExposure: 0.95,
         autoLP: false,
         shadows: false,
         initLightDir: [0.2,-0.3,-0.7],
@@ -111,6 +111,16 @@ export const config = {
                             {
                                 label: 'Palcoscenico',
                                 model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
+                                isSemantic: true,
+                                // TEMP
+                                content: {
+                                    type: 'img',
+                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.jpg',
+                                    title: 'Disegno della pianta del teatro',
+                                    description: `
+                                    Tommaso Bezzi: Disegno della pianta del teatro di S. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
+                                    `
+                                }
                             },
                             {
                                 label: 'Boccascena / Proscenio',

js/controllers/clipper_controller.js

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

js/controllers/menu_controller.js

@@ -193,6 +193,7 @@ export default class extends Controller {
             <i class="bi bi-chevron-down me-1"></i>${node.id}
         `;
         // Add color "swatch" only for first level groups
+        /*
         if (node.depth === 2) {
             trigger.innerHTML += html`
                 <div class="d-inline-block border rounded ms-2"
@@ -200,6 +201,7 @@ export default class extends Controller {
                 </div>
             `;
         }
+        */
 
         const collapseDiv = document.createElement('div');
         collapseDiv.className = 'collapse';
@@ -247,4 +249,36 @@ export default class extends Controller {
             domainList.innerHTML += domainItem;
         }
     }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    showSemanticModal(event) {
+        
+        console.debug('I have been triggered...');
+
+        const modal = document.querySelector('#semanticModal');
+        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.classList.add('img-fluid');
+        }
+
+        const description = document.createElement('p');
+        description.textContent = event.content?.description;
+        description.classList.add('py-3', 'my-2', 'fst-italic');
+
+        body.appendChild(content);
+        body.appendChild(description);
+
+        bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
 }

js/scene.js

@@ -37,7 +37,6 @@ function init () {
     ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
     ATON.toggleShadows(config.scene.shadows);
     ATON.setExposure(config.scene.initialExposure);
-    // Open settings side panel when clicking on settings btn
 
     AppState.camera = ATON.Nav._camera;
     AppState.renderer = ATON._renderer;
@@ -46,6 +45,8 @@ function init () {
     AppState.exposure = config.scene.initialExposure;
 
     ATON.Nav.setUserControl(true);
+    // Avoid semantic occlusion
+    ATON._bQuerySemOcclusion = false;
 }
 /**
  * @param {Object} marker - The marker object from config
@@ -79,10 +80,12 @@ function loadNodes(nodes) {
         node.load(n.model);
         node.setRotation(...config.scene.initRotation);
 
+        /*
         node.setMaterial(new THREE.MeshPhongMaterial({
             transparent: false,
             color: n.color ?? '#fff',
         }));
+        */
 
         // Apply any transparency before attaching to scene
         if (n.opacity !== undefined && n.opacity !== null) {
@@ -104,10 +107,41 @@ function loadNodes(nodes) {
             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) {
         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 = ATON.MatHub.materials.semanticShape;
+    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;
+}

js/state.js

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

js/utils/clipping.js

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

scenes/ssgp/index.html

@@ -58,7 +58,7 @@
 	<script type="module" src="./index.js"></script>
 </head>
 
-<body data-bs-theme="light" data-controller="menu">
+<body data-bs-theme="light" data-controller="menu" data-action="semantic-modal-show@document->menu#showSemanticModal">
     <div id="toolbar" class="aton-toolbar-top w-100"
         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">
@@ -81,7 +81,7 @@
             mt-4 text-dark text-center"
         id="clipper-bar"
         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"
                 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"
@@ -157,8 +157,21 @@
         </div>
     </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">
+        <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" >
         <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>

scenes/ssgp/index.js

@@ -15,3 +15,34 @@ AppState.treeNodes = tree;
 // TODO: add Map object for lookup optimization
 
 openScene(marker, AppState.normalizedNodes);
+
+// General hover/leave events handling for all semantic nodes.
+ATON.on("SemanticNodeHover", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        
+        console.debug('Sem node:', 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;
+
+        console.log(event);
+
+        document.dispatchEvent(event);
+    }
+});