Change map initial center and zoom + lame clipping plane...

config.js

@@ -17,8 +17,8 @@ export const config = {
         }
     ],
     map : {
-        center: [41.9028, 12.4964],
+        center: [43.570833, 12.140278],
-        initialZoom : 6,
+        initialZoom : 7,
         minZoom : 5,
         maxZoom : 15
     }

index.html

@@ -75,11 +75,17 @@
             <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
                 <i class="bi bi-gear-fill"></i>
             </a>
+            <a class="btn aton-btn fs-5" id="clipper" title="Clipper">
+                <i class="bi bi-scissors"></i>
+            </a>
             <button type="button" class="btn aton-btn fs-6 px-2" data-bs-toggle="modal" data-bs-target="#audio1">
                 Esempio modale audio
             </button>
         </div>
 
+        <!-- TODO CSS-only popover -->
+        <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+
         <div class="aton-poweredby" >
             <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
         </div>

js/main.js

@@ -24,12 +24,14 @@ APP.UI.pauseAudio = function(triggerSelector) {
     });
 }
 
+
 // APP.setup() is required for web-app initialization
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
     Map.init('map');
     Scene.toggleScene('back');
     APP.UI.pauseAudio('[data-bs-dismiss="modal"');
+    //APP.UI.showClipper('#clipper');
 };
 
 /* If you plan to use an update routine (executed continuously), you can place its logic here.

js/scene.js

@@ -10,6 +10,8 @@ const material = {
 
 const Scene = {};
 
+Scene.UI = {};
+
 /**
  * @todo Experimental...
  * @param {THREE.Object3D} object - A THREE Object3D instance
@@ -31,10 +33,26 @@ Scene.showEdges = function(object) {
 
 /**
  * 
- * @param {{x,y,z}} vector - An object with x,y,z coordinates
+ */
+Scene.activateClipper = function() {
+    const geometry = new THREE.PlaneGeometry( 24, 24 );
+    const material = new THREE.MeshPhongMaterial({
+        color: 0xffffee,
+        opacity: 0.5,
+        transparent: true,
+    });
+    const plane = new THREE.Mesh( geometry, material );
+    const root = ATON.getRootScene();
+    console.log(root, plane);
+    root.add(plane);
+}
+
+/**
+ * 
+ * @param {THREE.Vector3} vector - An object with x,y,z coordinates
  */
 Scene.changeLightDirection = function(vector) {
-    ATON.setMainLightDirection(new THREE.Vector3(vector.x, vector.y, vector.z));
+    ATON.setMainLightDirection(vector);
 }
 
 /**
@@ -111,7 +129,7 @@ Scene.toggleSettingsPanel = function(id) {
         shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
         shadowsSwitch.innerHTML = `
             <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
-            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title="Disabilitare le ombre può migliorare le prestazioni"></i></label>
+            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
         `;
 
         shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
@@ -137,6 +155,13 @@ Scene.toggleSettingsPanel = function(id) {
     });
 }
 
+Scene.UI.showClipper = function(triggerSelector) {
+    document.querySelector(triggerSelector).addEventListener(
+        'click',
+        () => Scene.activateClipper()
+    );
+}
+
 Scene.init = function() {
     console.log("I'm initializing, baby!")
     ATON.realize();
@@ -197,6 +222,8 @@ Scene.openScene = function(marker) {
 
         ATON.setAutoLP(true);
         Scene.toggleAmbientOcclusion(true);
+
+        Scene.UI.showClipper('#clipper');
     }
     //const rootUI = ATON.getRootUI();
 }