{"id":3000,"date":"2026-10-15T09:34:37","date_gmt":"2026-10-15T07:34:37","guid":{"rendered":"https:\/\/floating.land\/?page_id=3000"},"modified":"2026-10-15T09:36:04","modified_gmt":"2026-10-15T07:36:04","slug":"3d-konfigurator","status":"publish","type":"page","link":"https:\/\/floating.land\/en\/3d-konfigurator\/","title":{"rendered":"3D configurator"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3000\" class=\"elementor elementor-3000\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-644cf5f e-con-full e-flex e-con e-parent\" data-id=\"644cf5f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5fb28b3 elementor-widget elementor-widget-shortcode\" data-id=\"5fb28b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/GLTFLoader.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/loaders\/DRACOLoader.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/objects\/Water.js\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/objects\/Sky.js\"><\/script>\n    \n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap');\n        \n        \/* SAKRIJ SVE STANDARDNE WORDPRESS HEADERE I FOOTERE *\/\n        header, footer, .site-header, .site-footer, #masthead, #colophon, .wp-block-template-part, .elementor-header, .elementor-footer {\n            display: none !important;\n        }\n        html, body {\n            margin: 0 !important; padding: 0 !important; width: 100% !important; height: 100% !important; background: #020C1B !important;\n            overflow-x: hidden !important;\n        }\n\n        #fl-3d-wrapper {\n            position: relative; width: 100vw; min-height: 100vh;\n            background: radial-gradient(circle at center, #05142a 0%, #020C1B 100%);\n            font-family: 'Montserrat', sans-serif !important;\n            z-index: 999999; box-sizing: border-box;\n        }\n        \n        #fl-3d-canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }\n        #fl-3d-canvas { width: 100%; height: 100%; outline: none; cursor: grab; }\n        #fl-3d-canvas:active { cursor: grabbing; }\n\n        .fl-btn-theatre {\n            position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 30;\n            background: rgba(2, 12, 27, 0.8) !important; border: 1px solid rgba(201, 181, 158, 0.4) !important;\n            color: #C9B59E !important; padding: 10px 20px !important; font-family: 'Montserrat', sans-serif !important;\n            font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important;\n            cursor: pointer !important; border-radius: 2px !important; transition: all 0.3s ease !important;\n            display: flex; align-items: center; gap: 10px; outline: none !important; box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n        }\n        .fl-btn-theatre:hover { background: rgba(201, 181, 158, 0.2) !important; border-color: #C9B59E !important; color: #ffffff !important; }\n\n        .fl-3d-ui-panel {\n            position: absolute; z-index: 10;\n            background: rgba(2, 12, 27, 0.6) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);\n            border: 1px solid rgba(201, 181, 158, 0.15) !important;\n            padding: 30px !important; border-radius: 2px !important; color: #ffffff !important; pointer-events: auto;\n            box-sizing: border-box !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; \n        }\n\n        .fl-theatre-active .fl-panel-info { transform: translateX(-150%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }\n        .fl-theatre-active .fl-panel-selector { transform: translateX(150%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }\n        .fl-theatre-active .fl-btn-back { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }\n\n        \/* LIJEVI PANEL *\/\n        .fl-panel-info { top: 95px; left: 40px; width: 420px; }\n        .fl-panel-info h2 { font-family: 'Cinzel', serif !important; font-size: 2.5rem !important; color: #ffffff !important; margin: 0 0 10px 0 !important; line-height: 1 !important; }\n        .fl-panel-info .fl-sqm { color: #C9B59E !important; font-family: 'Cinzel', serif !important; font-size: 2rem !important; margin-bottom: 20px !important; display: block !important; }\n        \n        .fl-eq-tabs { display: flex !important; gap: 10px !important; margin-bottom: 25px !important; border: none !important; transition: margin-bottom 0.3s ease; }\n        .fl-eq-tab {\n            flex: 1 !important; background: transparent !important; color: rgba(255,255,255,0.4) !important;\n            padding: 12px 5px !important; font-family: 'Cinzel', serif !important; font-size: 0.75rem !important;\n            font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important;\n            cursor: pointer !important; outline: none !important; transition: 0.3s !important;\n            border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 0 !important; box-shadow: none !important;\n        }\n        .fl-eq-tab:hover { color: #ffffff !important; border-color: rgba(201, 181, 158, 0.5) !important; }\n        .fl-eq-tab.active { background: rgba(201, 181, 158, 0.1) !important; color: #C9B59E !important; border-color: #C9B59E !important; }\n\n        \/* PODIZBORNIK NAMJENA *\/\n        .fl-purpose-tabs { display: none; gap: 5px !important; margin-bottom: 25px !important; }\n        .fl-purpose-tab {\n            flex: 1 !important; background: transparent !important; color: rgba(255,255,255,0.4) !important;\n            padding: 8px 5px !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.65rem !important;\n            font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important;\n            cursor: pointer !important; outline: none !important; transition: 0.3s !important;\n            border: 1px dashed rgba(255, 255, 255, 0.1) !important; border-radius: 2px !important; box-shadow: none !important;\n        }\n        .fl-purpose-tab:hover { color: #ffffff !important; border-color: rgba(201, 181, 158, 0.5) !important; }\n        .fl-purpose-tab.active { background: rgba(26, 123, 152, 0.15) !important; color: #ffffff !important; border: 1px solid #1A7B98 !important; }\n        .fl-purpose-tab i { margin-right: 5px; color: inherit; }\n\n        .fl-panel-info ul { list-style: none !important; padding: 0 !important; margin: 0 0 30px 0 !important; }\n        .fl-panel-info li { font-size: 0.75rem !important; font-family: 'Montserrat', sans-serif !important; margin-bottom: 15px !important; display: flex !important; align-items: flex-start !important; gap: 15px !important; color: rgba(255,255,255,0.85) !important; line-height: 1.6 !important; }\n        .fl-panel-info li strong { color: #1A7B98 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; font-size: 0.7rem !important; width: 85px !important; flex-shrink: 0 !important; margin: 0 !important; font-family: 'Montserrat', sans-serif !important; }\n        \n        .fl-highlight-price { font-family: 'Cinzel', serif !important; font-size: 1.2rem !important; color: #ffffff !important; font-weight: 600 !important; letter-spacing: 0.05em; }\n\n        .fl-btn-3d { display: block !important; width: 100% !important; text-align: center !important; background: #C9B59E !important; color: #020C1B !important; padding: 15px !important; font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; text-decoration: none !important; transition: all 0.3s ease !important; font-size: 0.8rem !important; border: none !important; outline: none !important; border-radius: 2px !important; }\n        .fl-btn-3d:hover { background: #ffffff !important; color: #020C1B !important; box-shadow: 0 0 20px rgba(201, 181, 158, 0.4) !important; }\n\n        \/* DESNI PANEL *\/\n        .fl-panel-selector { top: 40px; right: 40px; width: 350px; max-height: calc(100% - 80px); display: flex !important; flex-direction: column !important; padding: 25px !important; }\n        .fl-tabs { display: flex !important; gap: 8px !important; margin-bottom: 15px !important; border-bottom: 1px solid rgba(201,181,158,0.2) !important; padding-bottom: 15px !important; }\n        .fl-tab { flex: 1 !important; background: transparent !important; color: rgba(255,255,255,0.5) !important; border: 1px solid rgba(255,255,255,0.1) !important; padding: 12px 4px !important; font-family: 'Cinzel', serif !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: 0.3s !important; text-align: center !important; border-radius: 2px !important; box-shadow: none !important; }\n        .fl-tab:hover { color: #ffffff !important; border-color: rgba(201,181,158,0.5) !important; }\n        .fl-tab.active { background: rgba(201, 181, 158, 0.1) !important; color: #C9B59E !important; border-color: #C9B59E !important; }\n        \n        .fl-filters { display: flex !important; gap: 8px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; justify-content: center !important; }\n        .fl-filter { background: transparent !important; color: rgba(255,255,255,0.6) !important; border: 1px solid rgba(255,255,255,0.1) !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.65rem !important; text-transform: uppercase !important; font-weight: 600 !important; letter-spacing: 0.05em !important; cursor: pointer !important; transition: 0.3s !important; padding: 8px 12px !important; border-radius: 2px !important; box-shadow: none !important; }\n        .fl-filter:hover { border-color: #1A7B98 !important; color: #ffffff !important; }\n        .fl-filter.active { background: #1A7B98 !important; color: #ffffff !important; border-color: #1A7B98 !important; }\n\n        .fl-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; overflow-y: auto !important; flex-grow: 1 !important; padding-right: 5px !important; }\n        .fl-grid::-webkit-scrollbar { width: 4px; }\n        .fl-grid::-webkit-scrollbar-thumb { background: #C9B59E; }\n        \n        .fl-config-btn { background: transparent !important; border: 1px solid rgba(255,255,255,0.1) !important; color: rgba(255,255,255,0.6) !important; padding: 15px 5px !important; text-align: center !important; cursor: pointer !important; transition: all 0.3s ease !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; outline: none !important; border-radius: 2px !important; box-shadow: none !important; }\n        .fl-config-btn:hover { border-color: rgba(201, 181, 158, 0.5) !important; color: #ffffff !important; background: rgba(255,255,255,0.03) !important; }\n        .fl-config-btn.active { background: rgba(201, 181, 158, 0.1) !important; border-color: #C9B59E !important; color: #C9B59E !important; }\n        \n        .fl-btn-sqm { font-family: 'Cinzel', serif !important; font-size: 1.3rem !important; font-weight: 600 !important; color: #ffffff !important; transition: 0.3s !important; }\n        .fl-config-btn.active .fl-btn-sqm { color: #C9B59E !important; }\n        .fl-btn-name { font-family: 'Montserrat', sans-serif !important; font-size: 0.65rem !important; font-weight: 500 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: inherit !important; }\n\n        \/* LOADER \/ PROGRESS BAR *\/\n        #fl-3d-loader { \n            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); \n            z-index: 200; color: #C9B59E; font-family: 'Cinzel', serif; font-size: 1rem; \n            letter-spacing: 0.15em; text-align: center; display: none; width: 280px;\n        }\n        .fl-loader-bar-bg { \n            width: 100%; height: 4px; background: rgba(201, 181, 158, 0.15); \n            border-radius: 2px; margin: 15px 0; overflow: hidden; position: relative; \n        }\n        #fl-loader-bar-fill { \n            width: 0%; height: 100%; background: #C9B59E; \n            border-radius: 2px; transition: width 0.15s ease-out; \n            box-shadow: 0 0 10px rgba(201, 181, 158, 0.5);\n        }\n        #fl-loader-percent { \n            font-family: 'Montserrat', sans-serif; font-weight: 600; color: #ffffff; \n            font-size: 1.3rem; margin-top: 5px; display: block; letter-spacing: 0.05em;\n        }\n        .fl-3d-hint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10; color: rgba(255,255,255,0.4); font-family: 'Montserrat', sans-serif !important; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; display: flex; align-items: center; gap: 10px; }\n\n        \/* GUMB \"HOMEPAGE\" *\/\n        .fl-btn-back {\n            position: absolute; top: 40px; left: 40px; z-index: 30;\n            background: rgba(2, 12, 27, 0.85) !important; border: 1px solid rgba(201, 181, 158, 0.3) !important;\n            color: #C9B59E !important; padding: 9px 16px !important; font-family: 'Montserrat', sans-serif !important;\n            font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important;\n            cursor: pointer !important; border-radius: 2px !important; text-decoration: none !important;\n            display: flex; align-items: center; gap: 8px; transition: all 0.3s ease;\n        }\n        .fl-btn-back:hover { border-color: #C9B59E !important; color: #ffffff !important; background: rgba(201, 181, 158, 0.2) !important; }\n\n        \/* MOBITEL (FLUIDNI SCROLL LAYOUT) *\/\n        @media (max-width: 900px) {\n            html, body {\n                overflow-y: auto !important;\n            }\n            #fl-3d-wrapper {\n                position: relative !important; height: auto !important; min-height: 100vh !important;\n                display: flex !important; flex-direction: column !important; overflow-y: visible !important;\n            }\n            #fl-3d-canvas-container { \n                position: relative !important; width: 100% !important; height: 55vh !important; min-height: 380px !important; order: 1 !important; z-index: 5 !important; \n            }\n            .fl-3d-ui-panel { \n                position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; \n                width: 100% !important; transform: none !important; border-radius: 0 !important; padding: 25px 20px !important; \n            }\n            .fl-panel-info { \n                order: 2 !important; border-top: 1px solid rgba(201, 181, 158, 0.2) !important; \n                border-bottom: 1px solid rgba(201, 181, 158, 0.2) !important; background: #020C1B !important; \n                flex-grow: 0 !important; top: auto !important; left: auto !important;\n            }\n            .fl-panel-selector { \n                order: 3 !important; max-height: none !important; background: #020C1B !important; \n                flex-grow: 1 !important; overflow-y: visible !important; top: auto !important; right: auto !important;\n                padding-bottom: 50px !important; \n            }\n            .fl-grid { max-height: none !important; overflow-y: visible !important; }\n            \n            .fl-theatre-active #fl-3d-canvas-container { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 9999 !important; background: radial-gradient(circle at center, #05142a 0%, #020C1B 100%) !important; }\n            .fl-theatre-active .fl-panel-info, .fl-theatre-active .fl-panel-selector { display: none !important; }\n            .fl-btn-back { top: 15px; left: 15px; padding: 8px 12px !important; }\n        }\n    <\/style>\n\n    <div id=\"fl-3d-wrapper\">\n        <div id=\"fl-3d-canvas-container\">\n            <!-- LOADER \/ PROGRESS BAR -->\n            <div id=\"fl-3d-loader\">\n                <span id=\"fl-loader-text-inner\">U\u010ditavanje modela<\/span>\n                <div class=\"fl-loader-bar-bg\">\n                    <div id=\"fl-loader-bar-fill\"><\/div>\n                <\/div>\n                <span id=\"fl-loader-percent\">0%<\/span>\n            <\/div>\n            \n            <!-- GUMB ZA POVRATAK NA WEB -->\n            <a href=\"https:\/\/floating.land\/\" class=\"fl-btn-back\">\n                <i class=\"fas fa-arrow-left\"><\/i> HOMEPAGE\n            <\/a>\n\n            <button id=\"fl-btn-theatre\" class=\"fl-btn-theatre\" onclick=\"flToggleTheatre()\">\n                <i id=\"theatre-icon\" class=\"fas fa-expand\"><\/i> <span id=\"theatre-text\">Pove\u0107aj 3D Prikaz<\/span>\n            <\/button>\n\n            <canvas id=\"fl-3d-canvas\"><\/canvas>\n            <div class=\"fl-3d-hint\"><i class=\"fas fa-hand-pointer\"><\/i> Povucite za rotaciju | Scroll za Zoom<\/div>\n        <\/div>\n\n        <!-- LIJEVI PANEL -->\n        <div class=\"fl-3d-ui-panel fl-panel-info\">\n            <h2 id=\"ui-naziv\">Type C115<\/h2>\n            <span class=\"fl-sqm\"><span id=\"ui-kvadratura\">115<\/span> m\u00b2<\/span>\n            \n            <div class=\"fl-eq-tabs\" id=\"eq-tabs-container\">\n                <button class=\"fl-eq-tab\" id=\"eq-base\" onclick=\"flMijenjajOpremu('base')\">Base Model<\/button>\n                <button class=\"fl-eq-tab active\" id=\"eq-premium\" onclick=\"flMijenjajOpremu('premium')\">Premium Model<\/button>\n            <\/div>\n\n            <!-- PODIZBORNIK NAMJENA -->\n            <div id=\"fl-purpose-menu\" class=\"fl-purpose-tabs\">\n                <button class=\"fl-purpose-tab active\" id=\"purp-suncaliste\" onclick=\"flMijenjajNamjenu('suncaliste')\"><i class=\"fas fa-umbrella-beach\"><\/i> Sun\u010dali\u0161te<\/button>\n                <button class=\"fl-purpose-tab\" id=\"purp-bar\" onclick=\"flMijenjajNamjenu('bar')\"><i class=\"fas fa-cocktail\"><\/i> Bar<\/button>\n                <button class=\"fl-purpose-tab\" id=\"purp-event\" onclick=\"flMijenjajNamjenu('event')\"><i class=\"fas fa-music\"><\/i> Event<\/button>\n            <\/div>\n\n            <ul>\n                <li><strong>Osnova<\/strong> <span id=\"ui-elementi\">14 Osnovnih HDPE...<\/span><\/li>\n                <li><strong>Oprema<\/strong> <span id=\"ui-sastav-opreme\">Sve iz Base modela...<\/span><\/li>\n                <li><strong id=\"ui-cijena-label\">Cijena isporuke<\/strong> <span id=\"ui-cijena\" class=\"fl-highlight-price\">Na upit<\/span><\/li>\n            <\/ul>\n            \n            <a href=\"#\" id=\"ui-link\" class=\"fl-btn-3d\">Detalji modela<\/a>\n        <\/div>\n\n        <!-- DESNI PANEL -->\n        <div class=\"fl-3d-ui-panel fl-panel-selector\">\n            <div class=\"fl-tabs\">\n                <button class=\"fl-tab active\" id=\"tab-stacionarna\" onclick=\"flMijenjajKategoriju('stacionarna')\">Stacionarne<\/button>\n                <button class=\"fl-tab\" id=\"tab-samohodna\" onclick=\"flMijenjajKategoriju('samohodna')\">Samohodne<\/button>\n            <\/div>\n            \n            <div class=\"fl-filters\">\n                <button class=\"fl-filter active\" id=\"filter-sve\" onclick=\"flMijenjajFilter('sve')\">Sve<\/button>\n                <button class=\"fl-filter\" id=\"filter-male\" onclick=\"flMijenjajFilter('male')\">< 100m\u00b2<\/button>\n                <button class=\"fl-filter\" id=\"filter-srednje\" onclick=\"flMijenjajFilter('srednje')\">100-200m\u00b2<\/button>\n                <button class=\"fl-filter\" id=\"filter-velike\" onclick=\"flMijenjajFilter('velike')\">> 200m\u00b2<\/button>\n            <\/div>\n\n            <div class=\"fl-grid\" id=\"ui-grid-lista\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        const configuratorData = [\n            { \n                id: 'c63', kategorija: 'stacionarna', naziv: \"Type C63\", kvadratura: \"63\", cijena_baza: \"113.400 \u20ac + PDV\", \n                elementi: \"7 osnovnih HDPE, modularnih elemenata + 6 dodatnih HDPE elemenata\", \n                bestseller: true, \n                modeli: { \n                    base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C63_BASE_Draco.glb\", \n                    suncaliste: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C63_SUN_Draco.glb\", \n                    bar: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C63_BAR_Draco.glb\", \n                    event: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C63_EVENT_Draco.glb\" \n                }, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'c88', kategorija: 'stacionarna', naziv: \"Type C88\", kvadratura: \"88\", cijena_baza: \"158.400 \u20ac + PDV\", \n                elementi: \"10 osnovnih HDPE, modularnih elemenata + 8 dodatnih HDPE elemenata\", \n                bestseller: false, \n                modeli: { \n                    base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C88_BASE_DRACO.glb\"}, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'c115', kategorija: 'stacionarna', naziv: \"Type C115\", kvadratura: \"115\", cijena_baza: \"207.000 \u20ac + PDV\", \n                elementi: \"14 osnovnih HDPE, modularnih elemenata + 10 dodatnih HDPE elemenata\", \n                bestseller: true, \n                modeli: { \n                    base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C115_BASE_DRACO.glb\", \n                    suncaliste: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/Floating-land-konfiguracija-115m2-google-earth.glb\", \n                    bar: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/Floating-land-konfiguracija-115m2-google-earth.glb\", \n                    event: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/Floating-land-konfiguracija-115m2-google-earth.glb\" \n                }, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'p105', kategorija: 'stacionarna', naziv: \"Type P105\", kvadratura: \"105\", cijena_baza: \"189.000 \u20ac + PDV\", \n                elementi: \"12 osnovnih HDPE, modularnih elemenata + 9 dodatnih HDPE elemenata\", \n                bestseller: false, \n                modeli: { base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_P105_BASE_DRACO.glb\"}, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'P140', kategorija: 'stacionarna', naziv: \"Type P140\", kvadratura: \"140\", cijena_baza: \"252.000 \u20ac + PDV\", \n                elementi: \"15 osnovnih HDPE, modularnih elemenata + 12 dodatnih HDPE elemenata\", \n                bestseller: false, \n                modeli: { base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_P140_BASE_DRACO.glb\"}, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'c164', kategorija: 'stacionarna', naziv: \"Type C164\", kvadratura: \"164\", cijena_baza: \"262.400 \u20ac + PDV\", \n                elementi: \"19 osnovnih HDPE, modularnih elemenata + 12 dodatnih HDPE elemenata\", \n                bestseller: false, \n                modeli: { base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_C164_BASE_DRACO.glb\" }, \n                link: \"\/kontakt\" \n            },\n            { \n                id: 'p170', kategorija: 'stacionarna', naziv: \"Type P170\", kvadratura: \"170\", cijena_baza: \"272.000 \u20ac + PDV\", \n                elementi: \"20 osnovnih HDPE, modularnih elemenata + 12 dodatnih HDPE elemenata\", \n                bestseller: false, \n                modeli: { base: \"https:\/\/floating.land\/wp-content\/uploads\/2026\/10\/TYPE_P170_BASE_DRACO.glb\" }, \n                link: \"\/kontakt\" \n            },\n\n        ];\n\n        let currentCategory = 'stacionarna';\n        let currentFilter = 'sve';\n        let currentModelId = 'c63';\n        let currentEquipment = 'premium'; \n        let currentPurpose = 'suncaliste';\n        let isTheatreMode = false; \n\n        let scene, camera, renderer, controls;\n        let water; \n        let loader = new THREE.GLTFLoader();\n        let dracoLoader = new THREE.DRACOLoader();\n        dracoLoader.setDecoderPath('https:\/\/cdn.jsdelivr.net\/npm\/three@0.128.0\/examples\/js\/libs\/draco\/gltf\/');\n        loader.setDRACOLoader(dracoLoader);\n        \n        let currentModelObj = null;\n\n        function init3D() {\n            const canvas = document.querySelector('#fl-3d-canvas');\n            const container = document.querySelector('#fl-3d-canvas-container');\n\n            scene = new THREE.Scene();\n            scene.fog = new THREE.FogExp2(0xd6eaf8, 0.0015);\n\n            camera = new THREE.PerspectiveCamera(40, container.clientWidth \/ container.clientHeight, 0.1, 1000);\n            camera.position.set(12, 5, 12); \n\n            renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: false, antialias: true });\n            renderer.setSize(container.clientWidth, container.clientHeight);\n            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n            renderer.outputEncoding = THREE.sRGBEncoding;\n            \n            renderer.toneMapping = THREE.LinearToneMapping;\n            renderer.toneMappingExposure = 0.95; \n\n            controls = new THREE.OrbitControls(camera, renderer.domElement);\n            controls.enableDamping = true;\n            controls.dampingFactor = 0.05;\n            controls.maxDistance = 30;\n            controls.minDistance = 4;  \n            controls.maxPolarAngle = Math.PI \/ 2 - 0.03;\n            controls.enablePan = false; \n            controls.autoRotate = true;\n            controls.autoRotateSpeed = 0.8;\n\n            \/\/ --- ROTO STIL MORA ---\n            const waterGeometry = new THREE.PlaneGeometry(2000, 2000);\n            water = new THREE.Water(\n                waterGeometry,\n                {\n                    textureWidth: 512,\n                    textureHeight: 512,\n                    waterNormals: new THREE.TextureLoader().load('https:\/\/raw.githubusercontent.com\/mrdoob\/three.js\/master\/examples\/textures\/waternormals.jpg', function (texture) {\n                        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;\n                    }),\n                    sunDirection: new THREE.Vector3(0.5, 0.8, 0.5).normalize(),\n                    sunColor: 0xffffff,\n                    waterColor: 0x0e5a8a,\n                    distortionScale: 1.5,\n                    alpha: 1.0,\n                    fog: true\n                }\n            );\n            water.rotation.x = -Math.PI \/ 2;\n            water.position.y = 0; \n            water.material.uniforms['size'].value = 8.0;\n            scene.add(water);\n\n            \/\/ --- \u010cISTO PLAVO NEBO ---\n            const sky = new THREE.Sky();\n            sky.scale.setScalar(10000);\n            scene.add(sky);\n\n            const skyUniforms = sky.material.uniforms;\n            skyUniforms['turbidity'].value = 0.8;\n            skyUniforms['rayleigh'].value = 1.8;\n            skyUniforms['mieCoefficient'].value = 0.005;\n            skyUniforms['mieDirectionalG'].value = 0.7;\n\n            const sun = new THREE.Vector3();\n            const phi = THREE.MathUtils.degToRad(90 - 55); \n            const theta = THREE.MathUtils.degToRad(135);\n            sun.setFromSphericalCoords(1, phi, theta);\n\n            sky.material.uniforms['sunPosition'].value.copy(sun);\n            water.material.uniforms['sunDirection'].value.copy(sun).normalize();\n\n            scene.environment = null;\n\n            \/\/ --- OSVJETLJENJE ---\n            const hemiLight = new THREE.HemisphereLight(0xffffff, 0xb8b0a4, 0.65);\n            hemiLight.position.set(0, 50, 0);\n            scene.add(hemiLight);\n            \n            const dirLight = new THREE.DirectionalLight(0xfffcf5, 0.55); \n            dirLight.position.set(15, 30, 15);\n            scene.add(dirLight);\n\n            const backLight = new THREE.DirectionalLight(0xffffff, 0.25);\n            backLight.position.set(-15, 15, -15);\n            scene.add(backLight);\n\n            window.addEventListener('resize', onWindowResize, false);\n            animate();\n            \n            generateUI();\n            if(configuratorData.length > 0) loadPlatform('c63');\n        }\n\n        function flToggleTheatre() {\n            isTheatreMode = !isTheatreMode;\n            const wrapper = document.getElementById('fl-3d-wrapper');\n            const icon = document.getElementById('theatre-icon');\n            const text = document.getElementById('theatre-text');\n            \n            if (isTheatreMode) {\n                wrapper.classList.add('fl-theatre-active');\n                icon.className = 'fas fa-compress';\n                text.innerText = 'Prika\u017ei su\u010delje';\n            } else {\n                wrapper.classList.remove('fl-theatre-active');\n                icon.className = 'fas fa-expand';\n                text.innerText = 'Pove\u0107aj 3D prikaz';\n            }\n            setTimeout(onWindowResize, 50);\n            setTimeout(onWindowResize, 400); \n        }\n\n        function flMijenjajOpremu(razina) {\n            if (currentEquipment === razina) return;\n            currentEquipment = razina;\n            document.querySelectorAll('.fl-eq-tab').forEach(b => b.classList.remove('active'));\n            document.getElementById('eq-' + razina).classList.add('active');\n            loadPlatform(currentModelId);\n        }\n\n        function flMijenjajNamjenu(namjena) {\n            if (currentPurpose === namjena) return;\n            currentPurpose = namjena;\n            document.querySelectorAll('.fl-purpose-tab').forEach(b => b.classList.remove('active'));\n            document.getElementById('purp-' + namjena).classList.add('active');\n            loadPlatform(currentModelId);\n        }\n\n        function osvjeziInfoPanela() {\n            if(!currentModelId) return;\n            const data = configuratorData.find(item => item.id === currentModelId);\n            if(!data) return;\n\n            document.getElementById('ui-elementi').innerText = data.elementi;\n\n            const purposeMenu = document.getElementById('fl-purpose-menu');\n            const eqTabsContainer = document.getElementById('eq-tabs-container');\n\n            if (data.bestseller && currentEquipment === 'premium') {\n                purposeMenu.style.display = 'flex';\n                eqTabsContainer.style.marginBottom = '10px';\n            } else {\n                purposeMenu.style.display = 'none';\n                eqTabsContainer.style.marginBottom = '25px';\n            }\n\n            if (currentEquipment === 'base') {\n                document.getElementById('ui-sastav-opreme').innerHTML = \"\u0160esterokutni HDPE, modularni elementi s poklopcima i podom (antislip ili izgled kamena). Tematizirana maska \\\"izgled stijena\\\" po vanjskom obodu (izgled\/boje se prilago\u0111avaju prema podneblju tako da se uklapa u okoli\u0161). Ljestve za pristup + Opcionalno* pristupna rampa.\";\n                document.getElementById('ui-cijena-label').innerText = \"Cijena baze\";\n                document.getElementById('ui-cijena').innerText = data.cijena_baza;\n            } else {\n                document.getElementById('ui-sastav-opreme').innerHTML = \"Sve iz Base modela + prilago\u0111ena nadgra\u0111a i namjenski setovi (npr. opremljeni bar, lounge namje\u0161taj, sun\u010dali\u0161te) u potpunosti prilago\u0111eni va\u0161oj viziji projekta.\";\n                document.getElementById('ui-cijena-label').innerText = \"Cijena isporuke\";\n                document.getElementById('ui-cijena').innerText = \"Na upit\";\n            }\n        }\n\n        function flMijenjajKategoriju(kategorija) {\n            currentCategory = kategorija;\n            currentFilter = 'sve'; \n            document.querySelectorAll('.fl-tab').forEach(b => b.classList.remove('active'));\n            document.getElementById('tab-' + kategorija).classList.add('active');\n            document.querySelectorAll('.fl-filter').forEach(b => b.classList.remove('active'));\n            document.getElementById('filter-sve').classList.add('active');\n            generateUI();\n        }\n\n        function flMijenjajFilter(filter) {\n            currentFilter = filter;\n            document.querySelectorAll('.fl-filter').forEach(b => b.classList.remove('active'));\n            document.getElementById('filter-' + filter).classList.add('active');\n            generateUI();\n        }\n\n        function generateUI() {\n            const container = document.getElementById('ui-grid-lista');\n            container.innerHTML = '';\n            let dataToShow = configuratorData.filter(item => item.kategorija === currentCategory);\n\n            if(currentFilter === 'male') dataToShow = dataToShow.filter(item => parseInt(item.kvadratura) < 100);\n            if(currentFilter === 'srednje') dataToShow = dataToShow.filter(item => parseInt(item.kvadratura) >= 100 && parseInt(item.kvadratura) <= 200);\n            if(currentFilter === 'velike') dataToShow = dataToShow.filter(item => parseInt(item.kvadratura) > 200);\n\n            dataToShow.forEach(item => {\n                const btn = document.createElement('button');\n                btn.className = 'fl-config-btn' + (currentModelId === item.id ? ' active' : '');\n                btn.id = 'btn-' + item.id;\n                btn.innerHTML = `<span class=\"fl-btn-sqm\">${item.kvadratura} m\u00b2<\/span><span class=\"fl-btn-name\">${item.naziv}<\/span>`;\n                btn.onclick = () => loadPlatform(item.id, true); \n                container.appendChild(btn);\n            });\n        }\n\n        function loadPlatform(id, autoScroll = false) {\n            currentModelId = id;\n            const data = configuratorData.find(item => item.id === id);\n            if(!data) return;\n\n            document.getElementById('ui-naziv').innerText = data.naziv;\n            document.getElementById('ui-kvadratura').innerText = data.kvadratura;\n            document.getElementById('ui-link').href = data.link;\n\n            osvjeziInfoPanela();\n\n            let urlToLoad = \"\";\n            if (currentEquipment === 'base' || !data.bestseller) {\n                urlToLoad = data.modeli.base;\n            } else {\n                urlToLoad = data.modeli[currentPurpose] || data.modeli.base;\n            }\n\n            document.querySelectorAll('.fl-config-btn').forEach(btn => btn.classList.remove('active'));\n            const activeBtn = document.getElementById('btn-' + id);\n            if(activeBtn) activeBtn.classList.add('active');\n\n            if(autoScroll && window.innerWidth <= 900) {\n                document.getElementById('fl-3d-canvas-container').scrollIntoView({behavior: 'smooth'});\n            }\n\n            if (currentModelObj) {\n                scene.remove(currentModelObj);\n                currentModelObj.traverse(function(child) {\n                    if (child.isMesh) {\n                        child.geometry.dispose();\n                        if (child.material.isMaterial) child.material.dispose();\n                        else for (const material of child.material) material.dispose();\n                    }\n                });\n                currentModelObj = null;\n            }\n\n            \/\/ AUTO-HEALING LOADER: Uvijek vra\u0107a ispravan HTML prije po\u010detka novog u\u010ditavanja\n            const loaderEl = document.getElementById('fl-3d-loader');\n            loaderEl.innerHTML = `\n                <span id=\"fl-loader-text-inner\">U\u010ditavanje modela<\/span>\n                <div class=\"fl-loader-bar-bg\">\n                    <div id=\"fl-loader-bar-fill\" style=\"width: 0%;\"><\/div>\n                <\/div>\n                <span id=\"fl-loader-percent\">0%<\/span>\n            `;\n            \n            const fillEl = document.getElementById('fl-loader-bar-fill');\n            const textEl = document.getElementById('fl-loader-percent');\n            \n            loaderEl.style.display = 'block';\n            document.getElementById('fl-3d-canvas').style.opacity = '0.3';\n\n            loader.load(\n                urlToLoad,\n                function (gltf) {\n                    currentModelObj = gltf.scene;\n                    \n                    currentModelObj.traverse(function(child) {\n                        if (child.isMesh && child.material) {\n                            const fixMaterial = (mat) => {\n                                mat.metalness = 0.0;\n                                mat.roughness = 0.95;\n                                mat.envMap = null;\n                                mat.envMapIntensity = 0.0;\n                                if ('specularIntensity' in mat) mat.specularIntensity = 0.1;\n                                mat.needsUpdate = true;\n                            };\n                            if (Array.isArray(child.material)) {\n                                child.material.forEach(fixMaterial);\n                            } else {\n                                fixMaterial(child.material);\n                            }\n                        }\n                    });\n\n                    const box = new THREE.Box3().setFromObject(currentModelObj);\n                    const center = box.getCenter(new THREE.Vector3());\n                    currentModelObj.position.x += (currentModelObj.position.x - center.x);\n                    currentModelObj.position.z += (currentModelObj.position.z - center.z);\n                    currentModelObj.position.y += (currentModelObj.position.y - box.min.y) - 0.15; \n                    scene.add(currentModelObj);\n                    \n                    const size = box.getSize(new THREE.Vector3()).length();\n                    camera.position.set(size * 0.75, size * 0.35, size * 0.75);\n                    controls.target.set(0, 0, 0);\n\n                    loaderEl.style.display = 'none';\n                    document.getElementById('fl-3d-canvas').style.opacity = '1';\n                },\n                function (xhr) {\n                    if (xhr.total > 0) {\n                        const percent = Math.round((xhr.loaded \/ xhr.total) * 100);\n                        if(fillEl) fillEl.style.width = percent + '%';\n                        if(textEl) textEl.innerText = percent + '%';\n                    } else {\n                        const estimatedTotal = 3500000; \n                        const progress = Math.min(99, Math.round((xhr.loaded \/ estimatedTotal) * 100));\n                        if(fillEl) fillEl.style.width = progress + '%';\n                        if(textEl) textEl.innerText = progress + '% U\u010ditavanje...';\n                    }\n                },\n                function (error) { \n                    console.error(\"Gre\u0161ka pri u\u010ditavanju GLB modela:\", error);\n                    \/\/ Prikazuje poruku, ali \u010dim korisnik klikne na bilo koji drugi model, auto-healing \u0107e ga automatski resetirati!\n                    loaderEl.innerHTML = \"<div style='color:#e74c3c; margin-bottom:10px;'>Model se privremeno ne mo\u017ee u\u010ditati.<\/div><span style='font-size:0.8rem; color:rgba(255,255,255,0.6);'>Molimo odaberite drugi model ili osvje\u017eite stranicu.<\/span>\";\n                    document.getElementById('fl-3d-canvas').style.opacity = '1';\n                }\n            );\n        }\n\n        function animate() {\n            requestAnimationFrame(animate);\n            if (water) {\n                water.material.uniforms['time'].value += 1.0 \/ 120.0;\n            }\n            controls.update(); \n            renderer.render(scene, camera);\n        }\n\n        function onWindowResize() {\n            const container = document.querySelector('#fl-3d-canvas-container'); \n            camera.aspect = container.clientWidth \/ container.clientHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize(container.clientWidth, container.clientHeight);\n        }\n\n        document.addEventListener(\"DOMContentLoaded\", init3D);\n    <\/script>\n    \n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3000","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/pages\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":4,"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/pages\/3000\/revisions"}],"predecessor-version":[{"id":3004,"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/pages\/3000\/revisions\/3004"}],"wp:attachment":[{"href":"https:\/\/floating.land\/en\/wp-json\/wp\/v2\/media?parent=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}