{"id":33,"date":"2026-04-12T15:52:58","date_gmt":"2026-04-12T15:52:58","guid":{"rendered":"http:\/\/domekszkieletowy.pl\/?page_id=33"},"modified":"2026-04-12T16:04:23","modified_gmt":"2026-04-12T16:04:23","slug":"kreator","status":"publish","type":"page","link":"https:\/\/domekszkieletowy.pl\/?page_id=33","title":{"rendered":"KREATOR"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Dojebany kreator 3D.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js\"><\/script>\n\n<div style=\"width: 100%; font-family: sans-serif; background: #000; border-radius: 15px; overflow: hidden; border: 1px solid #222;\">\n    \n    <div style=\"width: 100%; height: 450px; min-height: 400px; \n                background-image: url('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165754.png'); \n                background-size: cover; background-position: center; position: relative;\">\n        \n        <model-viewer id=\"pergola-final\" \n            src=\"http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Pergola.glb\" \n            camera-controls \n            loading=\"eager\"\n            touch-action=\"pan-y\"\n            shadow-intensity=\"2.5\" \n            shadow-softness=\"0.5\"\n            exposure=\"0.5\" \n            environment-image=\"neutral\"\n            interaction-prompt=\"none\"\n            style=\"width: 100%; height: 100%; background: rgba(0,0,0,0.3);\">\n        <\/model-viewer>\n    <\/div>\n\n    <div style=\"padding: 20px; background: white; border-top: 1px solid #ddd;\">\n        \n        <div style=\"margin-bottom: 25px;\">\n            <label style=\"display: block; font-size: 10px; font-weight: bold; color: #888; text-transform: uppercase; margin-bottom: 10px;\">Kolor Drewna<\/label>\n            <div style=\"display: flex; gap: 12px; flex-wrap: wrap;\">\n                <button onclick=\"window.applyWood('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165207.png')\" style=\"background: url('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165207.png'); width: 45px; height: 45px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; background-size: cover;\"><\/button>\n                <button onclick=\"window.applyWood('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-162647.png')\" style=\"background: url('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-162647.png'); width: 45px; height: 45px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; background-size: cover;\"><\/button>\n                <button onclick=\"window.applyWood('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165514.png')\" style=\"background: url('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165514.png'); width: 45px; height: 45px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; background-size: cover;\"><\/button>\n                <button onclick=\"window.applyWood('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165507.png')\" style=\"background: url('http:\/\/domekszkieletowy.pl\/wp-content\/uploads\/2026\/04\/Zrzut-ekranu-2026-04-12-165507.png'); width: 45px; height: 45px; border-radius: 50%; border: 2px solid #eee; cursor: pointer; background-size: cover;\"><\/button>\n            <\/div>\n        <\/div>\n\n        <div>\n            <label id=\"lbl-status\" style=\"display: block; font-size: 10px; font-weight: bold; color: #888; text-transform: uppercase; margin-bottom: 10px;\">Powierzchnia pod\u0142ogi: 100%<\/label>\n            <input type=\"range\" min=\"1.0\" max=\"2.5\" step=\"0.01\" value=\"1.0\" id=\"slider-floor\" style=\"width: 100%; height: 10px; cursor: pointer;\">\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n(function() {\n    const mv = document.querySelector('#pergola-final');\n    const slider = document.querySelector('#slider-floor');\n    const label = document.querySelector('#lbl-status');\n\n    \/\/ FIX: Jawne przypisanie do window, by WordPress nie blokowa\u0142 funkcji\n    window.applyWood = async (url) => {\n        if (!mv.model) return;\n        const texture = await mv.createTexture(url);\n        mv.model.materials.forEach(m => {\n            if (m.pbrMetallicRoughness.baseColorTexture) {\n                m.pbrMetallicRoughness.baseColorTexture.setTexture(texture);\n                \/\/ S\u0142oje wzd\u0142u\u017c desek (orientacja 0)\n                m.pbrMetallicRoughness.baseColorTexture.texture.sampler.setRotation(0);\n            }\n        });\n    };\n\n    \/\/ FUNKCJA SKALOWANIA: Przeszukuje model \"na wylot\"\n    const scaleFloorMesh = () => {\n        if (!mv.model) return;\n        const val = parseFloat(slider.value);\n        label.innerText = `Powierzchnia pod\u0142ogi: ${Math.round(val * 100)}%`;\n\n        \/\/ 1. SKALOWANIE MESHU (fizyczna wielko\u015b\u0107)\n        \/\/ Szukamy elementu PERGOLA.FLOOR\n        const allNodes = mv.model.nodes || [];\n        const floor = allNodes.find(n => n.name.toUpperCase().includes('FLOOR'));\n\n        if (floor) {\n            \/\/ Skalujemy szeroko\u015b\u0107 i d\u0142ugo\u015b\u0107 (X, Z), grubo\u015b\u0107 (Y) = 1\n            floor.scale.set(val, 1, val);\n        }\n\n        \/\/ 2. SKALOWANIE TEKSTURY (tiling), aby nie by\u0142o rozci\u0105gni\u0119cia\n        mv.model.materials.forEach(m => {\n            if (m.name.toUpperCase().includes('FLOOR') && m.pbrMetallicRoughness.baseColorTexture) {\n                m.pbrMetallicRoughness.baseColorTexture.texture.sampler.setScale({u: val, v: val});\n            }\n        });\n    };\n\n    slider.addEventListener('input', scaleFloorMesh);\n\n    \/\/ Inicjalizacja dopiero po pe\u0142nym za\u0142adowaniu\n    mv.addEventListener('load', () => {\n        console.log(\"Model gotowy na mobile i desktop.\");\n        scaleFloorMesh();\n    });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Dojebany kreator 3D. Kolor Drewna Powierzchnia pod\u0142ogi: 100%<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":3,"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/domekszkieletowy.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}