{"id":464,"date":"2025-10-10T14:39:31","date_gmt":"2025-10-10T14:39:31","guid":{"rendered":"https:\/\/romeo-brejon.mds-angers.yt\/?page_id=464"},"modified":"2025-10-10T14:41:35","modified_gmt":"2025-10-10T14:41:35","slug":"globe","status":"publish","type":"page","link":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/globe\/","title":{"rendered":"globe"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"464\" class=\"elementor elementor-464\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b068e1f e-flex e-con-boxed e-con e-parent\" data-id=\"b068e1f\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-cabbee8 e-con-full e-flex e-con e-child\" data-id=\"cabbee8\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-6ce985c e-con-full e-flex e-con e-child\" data-id=\"6ce985c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ac66c2 elementor-widget elementor-widget-html\" data-id=\"2ac66c2\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- === Globe 3D pour Elementor \/ WordPress === -->\n<div id=\"globe3d-container\" style=\"width:100%;max-width:900px;margin:0 auto;\">\n<div id=\"globe3d\" style=\"width:100%;aspect-ratio:16\/10;\"><\/div>\n<\/div>\n \n<!-- Variante MODULE (modern browsers) -->\n<script type=\"module\">\n\n  import * as THREE from \"https:\/\/unpkg.com\/three@0.160.0\/build\/three.module.js\";\n\n  import { OrbitControls } from \"https:\/\/unpkg.com\/three@0.160.0\/examples\/jsm\/controls\/OrbitControls.js\";\n \n  \/\/ ---- CIBLE DANS LA PAGE ----\n\n  const mount = document.getElementById(\"globe3d\");\n \n  \/\/ ---- SC\u00c8NE, CAM\u00c9RA, RENDERER ----\n\n  const scene = new THREE.Scene();\n\n  const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 1000);\n\n  camera.position.set(0, 0, 2.2);\n \n  const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n\n  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\n  mount.appendChild(renderer.domElement);\n \n  \/\/ ---- LUMI\u00c8RES ----\n\n  scene.add(new THREE.AmbientLight(0xffffff, 0.6));\n\n  const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);\n\n  dirLight.position.set(5, 3, 2);\n\n  scene.add(dirLight);\n \n  \/\/ ---- GLOBE TERRE ----\n\n  const texLoader = new THREE.TextureLoader();\n\n  \/\/ Texture \"Blue Marble\" (libre dans les examples Three.js)\n\n  const earthTexture = texLoader.load(\"https:\/\/threejs.org\/examples\/textures\/land_ocean_ice_cloud_2048.jpg\", () => {\n\n    renderer.render(scene, camera);\n\n  });\n \n  const globeGeo = new THREE.SphereGeometry(1, 64, 64);\n\n  const globeMat = new THREE.MeshPhongMaterial({\n\n    map: earthTexture,\n\n    shininess: 8\n\n  });\n\n  const globe = new THREE.Mesh(globeGeo, globeMat);\n\n  scene.add(globe);\n \n  \/\/ ---- CONTROLS (rotation \u00e0 la souris) ----\n\n  const controls = new OrbitControls(camera, renderer.domElement);\n\n  controls.enableDamping = true;\n\n  controls.dampingFactor = 0.05;\n\n  controls.enableZoom = false;   \/\/ tu peux mettre true si tu veux le zoom\n\n  controls.rotateSpeed = 0.6;\n\n  controls.minPolarAngle = Math.PI * 0.25; \/\/ limite vers le haut\n\n  controls.maxPolarAngle = Math.PI * 0.75; \/\/ limite vers le bas\n \n  \/\/ ---- RESPONSIVE ----\n\n  function resize() {\n\n    const w = mount.clientWidth;\n\n    const h = mount.clientHeight || (w \/ (16\/10)); \/\/ fallback si aspect-ratio non support\u00e9\n\n    renderer.setSize(w, h, false);\n\n    camera.aspect = w \/ h;\n\n    camera.updateProjectionMatrix();\n\n  }\n\n  resize();\n\n  new ResizeObserver(resize).observe(mount);\n\n  window.addEventListener(\"orientationchange\", resize);\n \n  \/\/ ---- ANIMATION LOOP ----\n\n  let last = performance.now();\n\n  function tick(now) {\n\n    const dt = (now - last) \/ 1000;\n\n    last = now;\n \n    \/\/ rotation lente auto (optionnel)\n\n    globe.rotation.y += 0.08 * dt;\n \n    controls.update();\n\n    renderer.render(scene, camera);\n\n    requestAnimationFrame(tick);\n\n  }\n\n  requestAnimationFrame(tick);\n<\/script>\n \n<!-- Variante UMD (fallback si le type=\"module\" est bloqu\u00e9 par ton WP) -->\n<!-- D\u00e9-commente les 3 lignes ci-dessous et commente le <script type=\"module\"> au-dessus si besoin.\n<script src=\"https:\/\/unpkg.com\/three@0.160.0\/build\/three.min.js\"><\/script>\n<script src=\"https:\/\/unpkg.com\/three@0.160.0\/examples\/js\/controls\/OrbitControls.js\"><\/script>\n<script>\n\n  (function(){\n\n    const mount = document.getElementById(\"globe3d\");\n\n    const scene = new THREE.Scene();\n\n    const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 1000);\n\n    camera.position.set(0, 0, 2.2);\n\n    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n\n    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n\n    mount.appendChild(renderer.domElement);\n \n    scene.add(new THREE.AmbientLight(0xffffff, 0.6));\n\n    const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);\n\n    dirLight.position.set(5, 3, 2);\n\n    scene.add(dirLight);\n \n    const loader = new THREE.TextureLoader();\n\n    const earthTexture = loader.load(\"https:\/\/threejs.org\/examples\/textures\/land_ocean_ice_cloud_2048.jpg\", () => {\n\n      renderer.render(scene, camera);\n\n    });\n \n    const globe = new THREE.Mesh(\n\n      new THREE.SphereGeometry(1, 64, 64),\n\n      new THREE.MeshPhongMaterial({ map: earthTexture, shininess: 8 })\n\n    );\n\n    scene.add(globe);\n \n    const controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n    controls.enableDamping = true;\n\n    controls.dampingFactor = 0.05;\n\n    controls.enableZoom = false;\n\n    controls.rotateSpeed = 0.6;\n\n    controls.minPolarAngle = Math.PI * 0.25;\n\n    controls.maxPolarAngle = Math.PI * 0.75;\n \n    function resize() {\n\n      const w = mount.clientWidth;\n\n      const h = mount.clientHeight || (w \/ (16\/10));\n\n      renderer.setSize(w, h, false);\n\n      camera.aspect = w \/ h;\n\n      camera.updateProjectionMatrix();\n\n    }\n\n    resize();\n\n    new ResizeObserver(resize).observe(mount);\n\n    window.addEventListener(\"orientationchange\", resize);\n \n    let last = performance.now();\n\n    function tick(now){\n\n      const dt = (now - last) \/ 1000; last = now;\n\n      globe.rotation.y += 0.08 * dt;\n\n      controls.update();\n\n      renderer.render(scene, camera);\n\n      requestAnimationFrame(tick);\n\n    }\n\n    requestAnimationFrame(tick);\n\n  })();\n<\/script>\n\n-->\n\n \n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"class_list":["post-464","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/pages\/464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/comments?post=464"}],"version-history":[{"count":5,"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/pages\/464\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/pages\/464\/revisions\/475"}],"wp:attachment":[{"href":"https:\/\/romeo-brejon.mds-angers.yt\/index.php\/wp-json\/wp\/v2\/media?parent=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}