versione 0.8

2026-07-13 11:58:30 +02:00
commit 761db06329
1723 changed files with 159016 additions and 0 deletions
@@ -0,0 +1,349 @@
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import $ from 'jquery';
+import { APP } from './app.js';
+import ParamsParser from './params_parser.js';
+import MenuBuilder from './menu_builder.js';
+import '@fortawesome/fontawesome-free/css/all.min.css';
+import './price_calculator.js';
+
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
+import Configurator from './configurator.js';
+
+
+window.$ = $;
+window.THREE = THREE; // Used by APP Scripts.
+window.OrbitControls = OrbitControls; // Used by APP Scripts.
+window.GLTFLoader = GLTFLoader; // Used by APP Scripts.
+
+
+$(() => {
+
+    $('.cart-button').on('click', async () => {
+
+        if($('.cart-button').hasClass('disabled'))
+            return;
+        const img = await window.generaImagine();
+        const data = {
+            payload: window.configurazione,
+            img: img,
+            qty: parseInt($('.quantity-input').val()),
+            fn: 'aggiungi_prodotto'
+        };
+
+
+        window.parent.postMessage(data, "https://www.infissionline.it");
+        window.parent.postMessage(data, "https://infissionline.test");
+    });
+});
+
+const start = async () => {
+    const params = ParamsParser.getQueryParams();
+
+    let data_folder = `./assets/data/sistemi/${params.sistema}`;
+    let modello_folder = `./assets/data/modelli/${params.sistema}`;
+
+
+    const modelli = await (await fetch(`${data_folder}/modelli.json?rnd=` + Math.random())).json();
+
+    const modello = modelli.find(m => m.id === params.type);
+
+    const data = await (await fetch(`${modello_folder}/${modello.cartella}/form.json?rnd=${Math.random()}`)).json();
+    const data_finiture = modello.moduli.includes('modello') ? (await (await fetch(`${modello_folder}/${modello.cartella}/modello.json?rnd=${Math.random()}`)).json()).filter(el => el.id != "") : [];
+    const data_maniglie = modello.moduli.includes('maniglia') ? (await (await fetch(`${modello_folder}/${modello.cartella}/maniglia.json?rnd=${Math.random()}`)).json()).filter(el => el.id != "") : [];
+    const data_avvolgibile = modello.moduli.includes('avvolgibile') ? (await (await fetch(`${modello_folder}/${modello.cartella}/avvolgibile.json?rnd=${Math.random()}`)).json()).filter(el => el.id != "") : [];
+    const data_vetri = modello.moduli.includes('vetro') ? (await (await fetch(`${modello_folder}/${modello.cartella}/vetro.json?rnd=${Math.random()}`)).json()).filter(el => el.id != "") : [];
+    const listino = modello.moduli.includes('listino') ? await (await fetch(`${modello_folder}/${modello.cartella}/listino.json?rnd=${Math.random()}`)).json() : [];
+    const altezza_maniglia = modello.moduli.includes('altezza_maniglia') ? await (await fetch(`${data_folder}/altezza_maniglia_${modello.categoria}.json?rnd=${Math.random()}`)).json() : [];
+
+    let priceCalculator = await MenuBuilder.build(data, 'left-container', modello.cartella_texture || modello.cartella, {
+        modelli: modelli,
+        categoria: modello.categoria,
+        sistema: params.sistema,
+        data_finiture: data_finiture,
+        data_maniglie: data_maniglie,
+        data_avvolgibile: data_avvolgibile,
+        data_vetri: data_vetri,
+        listino: listino,
+        modello_id: modello.id
+    });
+
+    Configurator.init(priceCalculator, {
+        modello: modello,
+        nome_esteso: data.nome,
+        data_finiture: data_finiture,
+        data_maniglie: data_maniglie,
+        data_avvolgibile: data_avvolgibile,
+        data_vetri: data_vetri,
+        altezza_maniglia: altezza_maniglia,
+        listino: listino
+    });
+
+    Configurator.enable();
+
+    $(`.menu-header-sistema .${params.sistema}`).addClass('selected');
+    $(`.v-divider.${params.sistema}`).addClass('d-none'); 
+
+    var player = new APP.Player('canvas-container');
+    var playerOff = new APP.Player('canvas-offscreen');
+
+    var loader = new THREE.FileLoader();
+    loader.load('./assets/app.json', function (text) {
+        player.load(JSON.parse(text));
+        playerOff.load(JSON.parse(text));
+        player.rotateBackground(Math.PI);
+        playerOff.rotateBackground(Math.PI);
+        playerOff.setSize(playerOff.dom.clientWidth, playerOff.dom.clientHeight);
+
+        var gltfLoader = new GLTFLoader();
+
+        gltfLoader.load(`./assets/models/${params.sistema}/${modello.modello}`, function (gltf) {
+            document.getElementById('loadingBarContainer').style.display = 'none';
+            //gltf.scene.rotation.y = THREE.MathUtils.degToRad(80);
+            gltf.scene.name = 'infisso';
+            window.current_model = modello.modello;
+            gltf.scene.userData.name = modello.modello;
+
+            //$("input[type=radio]").first().trigger("click");
+
+            gltf.scene.position.y = 0;
+            gltf.scene.position.z = 0.1;
+            //gltf.scene.rotation.set(0, Math.PI, 0);
+            player.addToScene(gltf.scene);
+            player.viewFrontSide();
+
+            playerOff.addToScene(gltf.scene.clone());
+            playerOff.viewFrontSide();
+            $('#canvas-offscreen').addClass('d-none');
+            player.dom.style.position = 'relative';
+
+            if (params.type != 'cassonetto') {
+                $("input[name=maniglia]").first().trigger("click");
+                $("input[name=finitura_interna]").eq(1).trigger("click");
+                $("input[name=finitura_interna]").eq(0).trigger("click");
+            }
+
+            $("#larghezza").first().trigger("change");
+
+            //player.addMarker("Cylinder028", 'left', 'https://www.youtube.com/embed/l_zqI0v7JcU?si=Vq2k8nWHYk13esMQ');
+            //player.addMarker("marker_1", 'left', 'https://www.youtube.com/embed/l_zqI0v7JcU?si=Vq2k8nWHYk13esMQ');
+            //player.addMarker("marker_2", 'right', 'https://www.youtube.com/embed/LCi9jdF_4MQ?si=b8cyxSOI2sKEmmcm');
+
+        },
+        function (xhr) {
+                var percentComplete = (xhr.loaded / xhr.total) * 100;
+                document.getElementById('loadingBarProgress').style.width = percentComplete + '%';
+                document.getElementById('loadingPercentage').innerText = Math.round(percentComplete) + '%';
+        }, function (error) {
+                console.error('An error happened while loading the GLB file:', error);
+        });
+
+        player.setSize(player.dom.clientWidth, player.dom.clientHeight);
+        player.play();
+
+        window.addEventListener('resize', function () {
+            //console.log(player.dom.clientWidth, player.dom.clientHeight);
+            player.setSize(player.dom.clientWidth, player.dom.clientHeight);
+            player.render();
+        });
+
+    });
+
+    $('.quantity-btn').on('click', (e) => {
+
+        const input = document.querySelector('.quantity-input');
+        let value = parseInt(input.value);
+
+        if (e.target.classList.contains('increment')) {
+            input.value = value + 1;
+        } else if (e.target.classList.contains('decrement') && value > 1) {
+            input.value = value - 1;
+        }
+    });
+
+    window.generaImagine = async () => {
+        playerOff.render();
+        $('#canvas-offscreen').removeClass('d-none');
+        const canvas = $('#canvas-offscreen canvas')[0];
+        const dataUrl = await canvas.toDataURL('image/png');
+
+        $('#canvas-offscreen').addClass('d-none');
+        return dataUrl;
+        const a = document.createElement('a');
+        a.href = dataUrl;
+        a.download = 'immagine.png';
+        a.click();
+    }
+
+    window.render = () => {
+        player.render();
+    }
+
+    let currentView = 'front';
+
+    window.cambiaTexture = (data) => {
+        return new Promise(async (resolve, reject) => {
+            try {
+
+                await player.changeTexture(data)
+                //console.log(data)
+                //console.log('window.rotate', window.rotate);
+                if (data && data.categories.includes('esterno') && currentView !== 'back'){
+                    if(window.rotate){
+                        player.flipView();
+                        currentView = 'back';
+                    }
+
+                }
+                    
+                
+                if (data && (data.categories.includes('interno') || data.categories.includes('maniglia')) && currentView !== 'front'){
+                    
+                    if(window.rotate){
+                        player.flipView();
+                        currentView = 'front';
+                    }
+                        
+                }
+                    
+                render();
+                resolve();
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
+    window.flip180 = () => {
+        player.flipView();
+        currentView = currentView === 'front' ? 'back' : 'front';
+        render();
+    }
+
+    window.checkFlip = (direction) => {
+
+        if(direction != currentView)
+            flip180();
+
+    }
+
+    window.cambiaColoreCB = (data) => {
+        player.changeColor(data);
+        render();
+    }
+
+    window.cambiaApertura = (name, scale) => {
+        player.changeXscale(name, scale);
+        render();
+    }
+
+    window.mostraCerniere = (categoria) => {
+        player.showObject(categoria);
+        render();
+    }
+
+    window.nascondiCerniere = (categoria) => {
+        player.hideObject(categoria);
+        render();
+    }
+
+    window.rotate = true;
+
+    window.caricaModello = (modello) => {
+        
+        let textureButtons = $(".texture-button:checked");
+
+        window.rotate = false;
+
+        const radios = {};
+        $('.texture-button[name]').each(function() {
+            radios[$(this).attr('name')] ??= this;
+        });
+
+        document.querySelectorAll(".texture-button[name=maniglia]").forEach(el => el.checked = false)
+
+        //console.log(textureButtons)
+        if(player.swapModel(modello)){
+
+            for(let el in radios){
+                $(radios[el]).trigger("click");
+            }
+
+            $(textureButtons).each((i, el) => {
+                $(el).trigger("click");
+            });
+            
+            setTimeout(() => {
+                window.rotate = true;
+            }, 1000);
+            //
+            return;
+        }
+
+        document.getElementById('loadingBarContainerAlt').style.display = 'flex';
+        document.getElementById('loadingBarProgressAlt').style.width = '0%';
+        document.getElementById('loadingPercentageAlt').innerText = '0%';
+
+        var gltfLoader = new GLTFLoader();
+
+        gltfLoader.load(`./assets/models/${modello}`, function (gltf) {
+            document.getElementById('loadingBarContainerAlt').style.display = 'none';
+            $('#canvas-offscreen').removeClass('d-none');
+            //gltf.scene.rotation.y = THREE.MathUtils.degToRad(80);
+            gltf.scene.name = 'infisso';
+
+            gltf.scene.userData.name = modello;
+            
+            setTimeout(() => {
+                for(let el in radios){
+                    $(radios[el]).trigger("click");
+                }
+            });
+
+            gltf.scene.position.y = 0;
+            gltf.scene.position.z = 0.1;
+            //gltf.scene.rotation.set(0, Math.PI, 0);
+            player.hideModel('infisso');
+            playerOff.hideModel('infisso');
+            player.addToScene(gltf.scene);
+            player.viewFrontSide();
+
+            playerOff.addToScene(gltf.scene.clone());
+            //playerOff.viewFrontSide();
+
+            $('#canvas-offscreen').addClass('d-none');
+            player.dom.style.position = 'relative';
+
+            if (params.type != 'cassonetto') {
+                $("input[name=maniglia]").first().trigger("click");
+            }
+
+            $("#larghezza").first().trigger("change");
+
+            $(textureButtons).each((i, el) => {
+                $(el).trigger("click");
+            });
+
+            setTimeout(() => {
+                window.rotate = true;
+            }, 1000);
+            //player.addMarker("Cylinder028", 'left', 'https://www.youtube.com/embed/l_zqI0v7JcU?si=Vq2k8nWHYk13esMQ');
+            //player.addMarker("marker_1", 'left', 'https://www.youtube.com/embed/l_zqI0v7JcU?si=Vq2k8nWHYk13esMQ');
+            //player.addMarker("marker_2", 'right', 'https://www.youtube.com/embed/LCi9jdF_4MQ?si=b8cyxSOI2sKEmmcm');
+
+        },
+        function (xhr) {
+                var percentComplete = (xhr.loaded / xhr.total) * 100;
+                document.getElementById('loadingBarProgressAlt').style.width = percentComplete + '%';
+                document.getElementById('loadingPercentageAlt').innerText = Math.round(percentComplete) + '%';
+        }, function (error) {
+                console.error('An error happened while loading the GLB file:', error);
+        });
+    }
+}
+
+
+start();