Add new PNG images for wheel and wheel click interactions

- Added `ruota.png` for the wheel graphic.
- Added `ruota_click.png` for the wheel click graphic.

src/assets/data.json

@@ -391,7 +391,7 @@
                     "material": "metal",
                     "value": "12_modulo dx",
                     "other_models": [{
-                        "color": "#f073c4",
+                        "color": "#edcb21",
                         "material": "plastic",
                         "model": "12_molla dx"
                     }],
@@ -406,7 +406,7 @@
                     "depends_on": {"id":"input-19", "value":"13_modulo x intrudere sx", "hide": true},
                     "value": "12_modulo sx",
                     "other_models": [{
-                        "color": "#f073c4",
+                        "color": "#edcb21",
                         "material": "plastic",
                         "model": "12_molla sx"
                     }],
@@ -428,12 +428,12 @@
                     "label_en": "Right Module",
                     "depends_on": {"id":"input-16", "value":"12_modulo dx", "hide": true},
                     "other_models": [{
-                        "color": "#f073c4",
+                        "color": "#edcb21",
                         "material": "plastic",
                         "model": "13_molla dx"
                     },{
-                        "color": "#34eb3d",
-                        "material": "plastic",
+                        "color": "#FFFFFF",
+                        "material": "transparent",
                         "model": "13_denti dx"
                     }],
                     "material": "metal",
@@ -448,12 +448,12 @@
                     "label_en": "Left Module",
                     "depends_on": {"id":"input-17", "value":"12_modulo sx", "hide": true},
                     "other_models": [{
-                        "color": "#f073c4",
+                        "color": "#edcb21",
                         "material": "plastic",
                         "model": "13_molla sx"
                     },{
-                        "color": "#34eb3d",
-                        "material": "plastic",
+                        "color": "#FFFFFF",
+                        "material": "transparent",
                         "model": "13_denti sx"
                     }],
                     "material": "metal",

src/index.html

@@ -113,7 +113,7 @@
             <div class="btn-container">
               <div class="btn btn-arcata-superiore"></div>
               <div class="btn btn-arcata-inferiore"></div>
-              <div class="btn btn-reset d-none"></div>
+              <div class="btn btn-ruota"></div>
             </div>
 
             <div class="inline-loader d-none">

src/modules/interfaccia.js

@@ -17,6 +17,7 @@ if(force_lang != null){
 
 export const setupButtons = () => {
 
+
     $('.pos-btn').each((i, el) => {
         $(el).on('click', () => {
             let side = $(el).data('side');
@@ -34,6 +35,12 @@ export const setupButtons = () => {
         $(".btn-arcata-inferiore").toggleClass('selected');
     })
 
+    $(".btn-ruota").on('click', () => {
+        //rotateTo('front');
+        ruotaModello();
+        //$(".btn-arcata-superiore").toggleClass('selected');
+    })
+
     $(".btn-config-menu").on('click', ()=>{
         if($(".left").hasClass('show-menu')){
             $(".left").addClass('hide-menu')

src/modules/scena-controller.js

@@ -191,8 +191,6 @@ export const loadGLBModel = async (name, path, color, material, callback = null)
             
         });
 
-
-        //if(callback != null) callback();
     });
 
 }
@@ -204,11 +202,10 @@ export const addModelToScene = (obj, name, color, material_type) => {
  
     let roughness = 1;
     let metalness = 0;
+    const textureLoader = new THREE.TextureLoader();
+    const lightMap = textureLoader.load('./assets/images/lightmap.png');
+    
 
-    if(material_type == 'metal'){
-        metalness = 0.86 ;
-        roughness = 0.3;
-    }
 
     const material = new THREE.MeshStandardMaterial({color: color, roughness: roughness, metalness: metalness}); //'#a0a0a0'
 
@@ -218,6 +215,18 @@ export const addModelToScene = (obj, name, color, material_type) => {
         mesh.material.roughness = roughness;
         mesh.material.metalness = metalness;
         mesh.material.needsUpdate = true;
+
+        if(material_type == 'metal'){
+            metalness = 0.86 ;
+            roughness = 0.3;
+            mesh.material.metalness = metalness;
+            mesh.material.roughness = roughness;
+        }
+
+        if(material_type == 'transparent'){
+            mesh.material.transparent = true;
+            mesh.material.opacity = 0.6;
+        }
     }else{
         mesh = new THREE.Mesh(obj, material);
     }
@@ -259,11 +268,12 @@ export const mostraArcata = async (model) => {
         doRender = true;
     }
     else{
-        let obj = await loadGLBModel("modello-"+model, './assets/glb/', '#efc971');
+        let obj = await loadGLBModel("modello-"+model, './assets/glb/', '#f7f7ba');
         obj.userData = {"type":"arcata"};
-        obj.material.roughness = 0.40;
+        obj.material.roughness = 0.35;
         obj.material.metalness = 0;
-
+        obj.material.needsUpdate = true;
+        
         if(debug == 'true'){
             $(".color-"+model).removeClass('d-none');
         }
@@ -579,7 +589,7 @@ export const cambiaColore = (objName, color) => {
 
 export const toggleModel = (objName) => {
     let obj = scene.getObjectByName(objName);
-    console.log(obj.material)
+
     obj.material.transparent = !obj.material.transparent;
     if(obj.material.transparent)obj.material.opacity = 0.1;
 
@@ -624,6 +634,22 @@ const toggleMobileMenu = () => {
 
 const DEG90 = Math.PI * 0.5;
 const DEG180 = Math.PI;
+let is_rotated = false;
+window.ruotaModello = () => {
+    cameraControls.rotateTo( 0, DEG90, false );
+    if(!is_rotated){
+        is_rotated = true;
+        mainGroup.rotateX(degToRad(-180));
+        $('.btn-ruota').addClass('active');
+
+        return;
+    }
+
+    $('.btn-ruota').removeClass('active');
+
+    is_rotated = false;
+    mainGroup.rotateX(degToRad(180));
+}
 
 window.rotateTo = (side) => {
 

src/style/main.css

@@ -14,6 +14,10 @@ html
     font-size: 1.01rem;
 }
 
+.btn{
+    cursor: pointer;
+}
+
 .main-container{
     height: 100vh;
     display: flex;
@@ -492,6 +496,15 @@ label > span{
     background-image: url(../assets/icone/arcata-inferiore_click.png);
 }
 
+.btn-ruota{
+    background-image: url("../assets/images/ruota.png");
+}
+
+.btn-ruota:hover, .btn-ruota.active{
+    background-image: url("../assets/images/ruota_click.png");
+}
+
+
 .btn-arcata-inferiore{
     background-image: url("../assets/images/arcata-inferiore.png");
 }