diff --git a/src/assets/data.json b/src/assets/data.json index 7b41b86..d98f0c9 100644 --- a/src/assets/data.json +++ b/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", diff --git a/src/assets/images/arredi_click.png b/src/assets/images/arredi_click.png deleted file mode 100644 index ae9ded6..0000000 Binary files a/src/assets/images/arredi_click.png and /dev/null differ diff --git a/src/assets/images/arredi_no_click.png b/src/assets/images/arredi_no_click.png deleted file mode 100644 index c80e5f0..0000000 Binary files a/src/assets/images/arredi_no_click.png and /dev/null differ diff --git a/src/assets/images/lightmap.png b/src/assets/images/lightmap.png new file mode 100644 index 0000000..d715c09 Binary files /dev/null and b/src/assets/images/lightmap.png differ diff --git a/src/assets/images/ruota.png b/src/assets/images/ruota.png new file mode 100644 index 0000000..31309bf Binary files /dev/null and b/src/assets/images/ruota.png differ diff --git a/src/assets/images/ruota_click.png b/src/assets/images/ruota_click.png new file mode 100644 index 0000000..bf41817 Binary files /dev/null and b/src/assets/images/ruota_click.png differ diff --git a/src/index.html b/src/index.html index cfedf67..55f54b0 100644 --- a/src/index.html +++ b/src/index.html @@ -113,7 +113,7 @@
-
+
diff --git a/src/modules/interfaccia.js b/src/modules/interfaccia.js index c36f7d1..57c795c 100644 --- a/src/modules/interfaccia.js +++ b/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') diff --git a/src/modules/scena-controller.js b/src/modules/scena-controller.js index 19219a7..c655a36 100644 --- a/src/modules/scena-controller.js +++ b/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) => { diff --git a/src/style/main.css b/src/style/main.css index 7df6f6e..45a0f98 100644 --- a/src/style/main.css +++ b/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"); }