{"id":7870,"date":"2025-11-01T11:09:54","date_gmt":"2025-11-01T11:09:54","guid":{"rendered":"https:\/\/ecopumptrack.com\/test-przegladarki-3d\/"},"modified":"2026-01-23T07:04:58","modified_gmt":"2026-01-23T07:04:58","slug":"test-przegladarki-3d","status":"publish","type":"page","link":"https:\/\/ecopumptrack.com\/pl\/test-przegladarki-3d\/","title":{"rendered":"Test przegl\u0105darki 3D"},"content":{"rendered":"\n\n\n\n    <meta charset=\"UTF-8\"\/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n    <script type=\"module\" src=\"https:\/\/unpkg.com\/@google\/model-viewer\/dist\/model-viewer.min.js\"><\/script>\n    <style>\n        body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }\n        model-viewer { width: 100%; height: 500px; }\n        .color-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 20px; }\n        .color-button {\n            width: 50px; height: 50px; border-radius: 50%; border: 2px solid transparent;\n            cursor: pointer; transition: 0.2s; outline: none;\n        }\n        .color-button:hover { background-color: #CCC; transform: scale(1.1); }\n        .color-button:active { background-color: inherit !important; }\n        .color-button.selected { \n            border: 4px solid #98FF98 !important; \n            background-color: inherit !important;\n        }\n        .red { background-color: #ff4444; } \n        .blue { background-color: #4466ff; }\n        .gray { background-color: #777777; } \n        .green { background-color: #98FF98; }\n    <\/style>\n\n\n\n    <!-- Unsichtbarer Produktname (Elementor setzt hier den Produktnamen ein) -->\n    <div id=\"product-name\" style=\"display: none;\">{post_title}<\/div>\n\n    <!-- Standardmodell (wird durch JavaScript ersetzt) -->\n    <model-viewer id=\"modelViewer\" src=\"https:\/\/ecopumptrack.com\/wp-content\/uploads\/2025\/02\/LISBON.glb\" camera-controls=\"\" auto-rotate=\"\" exposure=\"1\" ar=\"\" shadow-intensity=\"1\" environment-image=\"neutral\">\n    <\/model-viewer>\n\n    <div class=\"color-buttons\">\n        <button class=\"color-button red\" data-color=\"#ff4444\"><\/button>\n        <button class=\"color-button blue\" data-color=\"#4466ff\"><\/button>\n        <button class=\"color-button gray\" data-color=\"#777777\"><\/button>\n        <button class=\"color-button green\" data-color=\"#98FF98\"><\/button>\n    <\/div>\n\n    <script>\n        document.addEventListener(\"DOMContentLoaded\", function() {\n            \/\/ Produktnamen aus Elementor holen\n            let productNameElement = document.getElementById(\"product-name\");\n            let modelViewer = document.getElementById(\"modelViewer\");\n\n            if (productNameElement) {\n                let productName = productNameElement.innerText.trim();\n\n                \/\/ Setzt direkt die Model-URL ohne Bereinigung\n                let modelUrl = \"https:\/\/ecopumptrack.com\/wp-content\/uploads\/2025\/02\/LISBON.glb\";\n                modelViewer.src = modelUrl;\n            }\n\n            \/\/ Farbwechsel-Funktion\n            const buttons = document.querySelectorAll(\".color-button\");\n\n            async function changeColor(event) {\n                await modelViewer.updateComplete;\n                const rgb = hexToRgb(event.target.dataset.color);\n                modelViewer.model.materials.find(m => m.name.includes(\"Track_Color\"))\n                    ?.pbrMetallicRoughness.setBaseColorFactor([rgb.r \/ 255, rgb.g \/ 255, rgb.b \/ 255, 1]);\n\n                buttons.forEach(btn => btn.classList.remove(\"selected\"));\n                event.target.classList.add(\"selected\");\n            }\n\n            function hexToRgb(hex) {\n                const bigint = parseInt(hex.slice(1), 16);\n                return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };\n            }\n\n            buttons.forEach(btn => btn.addEventListener(\"click\", changeColor));\n        });\n    <\/script>\n\n\n\n\n\n  <!-- Lade Model-Viewer (leichtgewichtig; ggf. nur einmal pro Seite n\u00f6tig) -->\n  <script type=\"module\" src=\"https:\/\/unpkg.com\/@google\/model-viewer\/dist\/model-viewer.min.js\"><\/script>\n\n  <div id=\"wrap_jk0wEI\" style=\"max-width:900px;margin:0 auto;\">\n    <!-- 3D-Modell -->\n<model-viewer\n  id=\"mv_mfLJO7\"\n  src=\"https:\/\/ecopumptrack.com\/wp-content\/uploads\/2025\/02\/3DPumptracks\/LISBON.glb\"\n  camera-controls\n  environment-image=\"https:\/\/ecopumptrack.com\/wp-content\/uploads\/2025\/02\/3DPumptracks\/aircraft_workshop_01_1k.hdr\"\n  environment-intensity=\"1\"\n  exposure=\"1\"\n  shadow-intensity=\"2\"\n  shadow-softness=\"0.6\"\n  camera-orbit=\"0deg 75deg 80%\"\n  field-of-view=\"40deg\"\n  ar\n  ar-modes=\"webxr scene-viewer quick-look\"\n  ar-scale=\"auto\"\n  xr-environment\n  style=\"width:100%;height:500px;background:#ebebeb;display:block;margin:auto;\"\n>\t  \n<button \n  slot=\"ar-button\"\n  class=\"pt3d-ar\"\n  type=\"button\"\n  style=\"display:block;\n         margin:20px auto 0 auto;\n         color:var(--global-palette2);\n         font-weight:600;\n         border:none;\n         border-radius:999px;\n         padding:12px 26px;\n         cursor:pointer;\n         box-shadow:0 4px 10px rgba(0,0,0,0.2);\n         font-size:16px;\n         background:var(--global-palette3);\">\n  In AR ansehen\n<\/button>\n\n<\/model-viewer>\n\n    <!-- Farb-Auswahl (Rot, Blau, Hellgrau, Gr\u00fcn) -->\n    <div class=\"pt3d-palette\" style=\"display:flex;gap:14px;justify-content:center;align-items:center;margin:10px 0 0;\">\n      <button class=\"pt3d-dot\" data-color=\"#ff4444\" aria-label=\"Rot\"      title=\"Rot\"      style=\"background:#ff4444;\"><\/button>\n      <button class=\"pt3d-dot\" data-color=\"#4466ff\" aria-label=\"Blau\"     title=\"Blau\"     style=\"background:#4466ff;\"><\/button>\n      <button class=\"pt3d-dot\" data-color=\"#cbcbcb\" aria-label=\"Hellgrau\" title=\"Hellgrau\" style=\"background:#cbcbcb;\"><\/button>\n      <button class=\"pt3d-dot\" data-color=\"#3e694c'\" aria-label=\"Gr\u00fcn\"     title=\"Gr\u00fcn\"     style=\"background:#3e694c;\"><\/button>\n    <\/div>\n  <\/div>\n\n  <style>\n    .pt3d-dot {\n      width: 38px; height: 38px; border-radius: 50%;\n      border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15);\n      cursor: pointer; padding: 0; outline: none; display: inline-block;\n      transition: transform .12s ease;\n    }\n    .pt3d-dot:hover { transform: scale(1.08); }\n    .pt3d-dot:focus-visible { box-shadow: 0 0 0 3px rgba(66,133,244,.5); }\n    .pt3d-dot.is-active { box-shadow: 0 0 0 2px #222, inset 0 0 0 2px #fff; }\n  <\/style>\n\n  <script type=\"module\">\n    (()=>{\n      const mv   = document.getElementById('mv_mfLJO7');\n      const wrap = document.getElementById('wrap_jk0wEI');\n      const dots = wrap.querySelectorAll('.pt3d-dot');\n      const startBase = '#3e694c'; \/\/ Startfarbe aus Shortcode\n\n      \/\/ HEX \u2192 [r,g,b] 0..1\n      const hex01 = (h) => ([\n        parseInt(h.slice(1,3),16)\/255,\n        parseInt(h.slice(3,5),16)\/255,\n        parseInt(h.slice(5,7),16)\/255\n      ]);\n\n      function setActive(hex){\n        dots.forEach(d => d.classList.toggle('is-active', d.dataset.color.toLowerCase() === hex.toLowerCase()));\n      }\n\n      async function setBaseColor(hex){\n        await mv.updateComplete;\n        const mats = mv.model?.materials || [];\n        const mat  = mats.find(m => (m.name||'').includes('Track_Color')) || mats[0];\n        const pbr  = mat?.pbrMetallicRoughness;\n        if (!mat || !pbr) return;\n\n        \/\/ Optional: Map abklemmen, damit Faktoren wirken\n        if (pbr.metallicRoughnessTexture?.setTexture) {\n          pbr.metallicRoughnessTexture.setTexture(null);\n        }\n\n        const [r,g,b] = hex01(hex);\n        pbr.setBaseColorFactor([r,g,b,1]);\n\n        \/\/ Leicht metallisch & moderat rau f\u00fcr \"lebendige\" Farbe (anpassbar)\n        pbr.setMetallicFactor(0.15);\n        pbr.setRoughnessFactor(0.55);\n\n        \/\/ Emissive neutral\n        mat.setEmissiveFactor('#000000');\n\n        setActive(hex);\n      }\n\n      \/\/ Initial: Startfarbe aus Shortcode anwenden (oder gr\u00fcn, falls nicht in Palette)\n      mv.addEventListener('load', () => {\n        const initHex = startBase || '#3e694c';\n        setBaseColor(initHex);\n      }, { once: true });\n\n      \/\/ Klick-Events\n      dots.forEach(btn => {\n        btn.addEventListener('click', () => setBaseColor(btn.dataset.color));\n      });\n    })();\n  <\/script>\n\n  \n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>{post_title}<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-7870","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/pages\/7870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/comments?post=7870"}],"version-history":[{"count":2,"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/pages\/7870\/revisions"}],"predecessor-version":[{"id":7873,"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/pages\/7870\/revisions\/7873"}],"wp:attachment":[{"href":"https:\/\/ecopumptrack.com\/pl\/wp-json\/wp\/v2\/media?parent=7870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}