{"id":10,"date":"2023-10-08T18:40:50","date_gmt":"2023-10-08T18:40:50","guid":{"rendered":"http:\/\/abcourt.net\/?page_id=10"},"modified":"2024-01-11T18:02:13","modified_gmt":"2024-01-11T18:02:13","slug":"resources","status":"publish","type":"page","link":"https:\/\/abcourt.net\/fr\/resources\/","title":{"rendered":"Resources"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99319a7 e-con-full e-flex e-con e-parent\" data-id=\"99319a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aab8f47 elementor-widget elementor-widget-html\" data-id=\"aab8f47\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Import the component -->\r\n<script type=\"module\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.3.0\/model-viewer.min.js\"><\/script>\r\n\r\n<style>\r\n    model-viewer {\r\n        width: 100%;\r\n        height: 1400px;\r\n        position: relative; \/* Add relative positioning to the model-viewer *\/\r\n    }\r\n\r\n    .loading-container {\r\n        position: absolute;\r\n        top: 20%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n    }\r\n\r\n    .loading-text {\r\n        color: #fbc623;\r\n        font-size: 28px;\r\n        font-family: 'Arial', sans-serif;\r\n        letter-spacing: 1px;\r\n    }\r\n.legend-container {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    align-items: center;\r\n    background: #f9f9f9;\r\n    padding: 20px;\r\n    z-index: 9;\r\n    border-radius: 0 0 5px 5px;\r\n}\r\n.loading-gif {\r\n    width: 200px;\r\n    height: 200px;\r\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\r\n}\r\n.legend-item {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-right: 10px; \/* Space between legend items *\/\r\n}\r\n\r\n.legend-color {\r\n    width: 20px; \/* Size of color box *\/\r\n    height: 20px;\r\n    margin-right: 5px; \/* Space between color box and text *\/\r\n}\r\n\r\n.legend-text {\r\n    font-size: 22px; \/* Adjust as necessary *\/\r\n    color: #333; \/* Text color *\/\r\n}\r\n<\/style>\r\n<!-- Legend Container -->\r\n<div class=\"legend-container\">\r\n    <div class=\"legend-item\">\r\n        <span class=\"legend-color\" style=\"background-color: #dbc463;\"><\/span>\r\n        <span class=\"legend-text\">Inferred<\/span>\r\n    <\/div>\r\n    <div class=\"legend-item\">\r\n        <span class=\"legend-color\" style=\"background-color: green;\"><\/span>\r\n        <span class=\"legend-text\">Indicated<\/span>\r\n    <\/div>\r\n<\/div>\r\n<!-- Loading container with GIF and text -->\r\n<div class=\"loading-container\" id=\"loading-container\">\r\n    <img decoding=\"async\" src=\"https:\/\/abcourt.net\/wp-content\/uploads\/2024\/01\/1.gif\" alt=\"Loading...\" class=\"loading-gif\">\r\n    <div class=\"loading-text\" id=\"loading-percentage\"><\/div>\r\n<\/div>\r\n\r\n\r\n<!-- Model Viewer -->\r\n<model-viewer\r\n    id=\"my-model\"\r\n    src=\"https:\/\/abcourt.net\/wp-content\/uploads\/2023\/12\/resources.glb\"\r\n    shadow-intensity=\"1\"\r\n    camera-controls\r\n camera-orbit=\"60deg 90deg 20m\"\r\n    field-of-view=\"45deg\"\r\n    min-camera-orbit=\"auto auto 10m\"\r\n    max-camera-orbit=\"auto auto 150m\"\r\n    min-field-of-view=\"10deg\"\r\n    max-field-of-view=\"45deg\"\r\n>\r\n<\/model-viewer>\r\n\r\n<script>\r\n    document.addEventListener('DOMContentLoaded', async () => {\r\n        const modelViewer = document.getElementById('my-model');\r\n        const loadingContainer = document.getElementById('loading-container');\r\n        const loadingText = document.getElementById('loading-percentage');\r\n\r\n        const glbUrl = 'https:\/\/abcourt.net\/wp-content\/uploads\/2023\/12\/resources.glb';\r\n\r\n        try {\r\n            const response = await fetch(glbUrl);\r\n            const reader = response.body.getReader();\r\n            const totalBytes = parseInt(response.headers.get('content-length')) || 0;\r\n\r\n            let loadedBytes = 0;\r\n\r\n            modelViewer.addEventListener('progress', async () => {\r\n                const { done, value } = await reader.read();\r\n\r\n                if (done) {\r\n                    reader.releaseLock();\r\n                } else {\r\n                    loadedBytes += value.byteLength;\r\n\r\n                    if (totalBytes > 0) {\r\n                        const progressPercent = (loadedBytes \/ totalBytes) * 100;\r\n                        loadingText.innerText = `${progressPercent.toFixed(0)}%`;\r\n                    } else {\r\n                        loadingText.innerText = '';\r\n                    }\r\n                }\r\n            });\r\n\r\n            modelViewer.addEventListener('load', () => {\r\n                loadingContainer.style.display = 'none';\r\n                console.log('Model loaded successfully.');\r\n            });\r\n\r\n            \/\/ Additional console log for debugging\r\n            modelViewer.addEventListener('error', (event) => {\r\n                console.error('Error loading model:', event.detail.src);\r\n            });\r\n\r\n            \/\/ Prevent panning\r\n           \/\/ modelViewer.addEventListener('camera-change', () => {\r\n            modelViewer.cameraTarget = '0m -6m 0m';\r\n            \/\/});\r\n        } catch (error) {\r\n            console.error('Error fetching model:', error);\r\n            loadingText.innerText = 'Error loading model';\r\n        }\r\n    });\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Inferred Indicated<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":400,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":2630,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/10\/revisions\/2630"}],"wp:attachment":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}