{"id":1689,"date":"2023-11-13T22:06:02","date_gmt":"2023-11-13T22:06:02","guid":{"rendered":"https:\/\/abcourt.net\/shaft\/"},"modified":"2024-01-08T23:12:22","modified_gmt":"2024-01-08T23:12:22","slug":"shaft","status":"publish","type":"page","link":"https:\/\/abcourt.net\/fr\/shaft\/","title":{"rendered":"Shaft"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1689\" class=\"elementor elementor-1689\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dccf8bd e-con-full e-flex e-con e-parent\" data-id=\"dccf8bd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f566aca elementor-widget elementor-widget-html\" data-id=\"f566aca\" 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    .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<\/style>\r\n\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\/shaft.glb\"\r\n    shadow-intensity=\"1\"\r\n    camera-controls\r\n camera-orbit=\"60deg 85deg 20m\"\r\n    field-of-view=\"45deg\"\r\n    min-camera-orbit=\"auto auto 1m\"\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\/shaft.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":"","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-1689","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/1689","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=1689"}],"version-history":[{"count":40,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/1689\/revisions"}],"predecessor-version":[{"id":2316,"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/pages\/1689\/revisions\/2316"}],"wp:attachment":[{"href":"https:\/\/abcourt.net\/fr\/wp-json\/wp\/v2\/media?parent=1689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}