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

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();
 }