3D Kugle med Tekstur<\/title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n }\n #3d-container {\n width: 100vw;\n height: 100vh;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"3d-container\"><\/div>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script>\n \/\/ Opret scene\n const scene = new THREE.Scene();\n\n \/\/ Opret kamera\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n camera.position.set(4.16, -1.43, -2.38);\n\n \/\/ Opret renderer\n const renderer = new THREE.WebGLRenderer();\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.getElementById('3d-container').appendChild(renderer.domElement);\n\n \/\/ Indl\u00e6s tekstur\n const textureLoader = new THREE.TextureLoader();\n const texture = textureLoader.load('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/moon-4k-scaled.jpg');\n\n \/\/ Opret kugle med tekstur\n const geometry = new THREE.SphereGeometry(1, 32, 32);\n const material = new THREE.MeshBasicMaterial({ map: texture });\n const sphere = new THREE.Mesh(geometry, material);\n scene.add(sphere);\n\n \/\/ Start rotation og position\n let targetRotationX = -0.29;\n let targetRotationY = 2.09;\n let currentRotationX = -0.29;\n let currentRotationY = 2.09;\n\n \/\/ Variabler til musens position og tilstand\n let isMouseDown = false;\n let lastMouseX = 0;\n let lastMouseY = 0;\n\n \/\/ Event listener for mousedown\n document.addEventListener('mousedown', (event) => {\n isMouseDown = true;\n lastMouseX = event.clientX;\n lastMouseY = event.clientY;\n });\n\n \/\/ Event listener for mouseup\n document.addEventListener('mouseup', () => {\n isMouseDown = false;\n });\n\n \/\/ Event listener for mousemove\n document.addEventListener('mousemove', (event) => {\n if (isMouseDown) {\n let deltaX = event.clientX - lastMouseX;\n let deltaY = event.clientY - lastMouseY;\n\n targetRotationY -= deltaX * 0.01;\n targetRotationX += deltaY * 0.01;\n\n lastMouseX = event.clientX;\n lastMouseY = event.clientY;\n }\n });\n\n \/\/ Animation loop\n function animate() {\n requestAnimationFrame(animate);\n\n \/\/ Glat rotation\n currentRotationY += (targetRotationY - currentRotationY) * 0.1;\n currentRotationX += (targetRotationX - currentRotationX) * 0.1;\n\n \/\/ Gr\u00e6nser for rotation\n currentRotationX = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, currentRotationX));\n\n \/\/ Opdater kameraets position baseret p\u00e5 rotation\n camera.position.x = 5 * Math.sin(currentRotationY) * Math.cos(currentRotationX);\n camera.position.y = 5 * Math.sin(currentRotationX);\n camera.position.z = 5 * Math.cos(currentRotationY) * Math.cos(currentRotationX);\n camera.lookAt(scene.position);\n\n renderer.render(scene, camera);\n }\n animate();\n\n \/\/ Juster st\u00f8rrelse ved \u00e6ndring af vinduets st\u00f8rrelse\n window.addEventListener('resize', function () {\n const width = window.innerWidth;\n const height = window.innerHeight;\n renderer.setSize(width, height);\n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n });\n\n \/\/ Zoom funktion med hjul\n function onDocumentMouseWheel(event) {\n const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));\n camera.position.multiplyScalar(1 + -delta * 0.1);\n camera.updateProjectionMatrix();\n }\n\n document.addEventListener('mousewheel', onDocumentMouseWheel, false);\n document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false); \/\/ for Firefox\n\n <\/script>\n<\/body>\n<\/html>\n\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":"<p>3D Kugle med Tekstur<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1878","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1878"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878\/revisions"}],"predecessor-version":[{"id":2284,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878\/revisions\/2284"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n 3D Kugle med Tekstur<\/title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n }\n #3d-container {\n width: 100vw;\n height: 100vh;\n }\n <\/style>\n<\/head>\n<body>\n <div id=\"3d-container\"><\/div>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\n <script>\n \/\/ Opret scene\n const scene = new THREE.Scene();\n\n \/\/ Opret kamera\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth \/ window.innerHeight, 0.1, 1000);\n camera.position.set(4.16, -1.43, -2.38);\n\n \/\/ Opret renderer\n const renderer = new THREE.WebGLRenderer();\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.getElementById('3d-container').appendChild(renderer.domElement);\n\n \/\/ Indl\u00e6s tekstur\n const textureLoader = new THREE.TextureLoader();\n const texture = textureLoader.load('http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/moon-4k-scaled.jpg');\n\n \/\/ Opret kugle med tekstur\n const geometry = new THREE.SphereGeometry(1, 32, 32);\n const material = new THREE.MeshBasicMaterial({ map: texture });\n const sphere = new THREE.Mesh(geometry, material);\n scene.add(sphere);\n\n \/\/ Start rotation og position\n let targetRotationX = -0.29;\n let targetRotationY = 2.09;\n let currentRotationX = -0.29;\n let currentRotationY = 2.09;\n\n \/\/ Variabler til musens position og tilstand\n let isMouseDown = false;\n let lastMouseX = 0;\n let lastMouseY = 0;\n\n \/\/ Event listener for mousedown\n document.addEventListener('mousedown', (event) => {\n isMouseDown = true;\n lastMouseX = event.clientX;\n lastMouseY = event.clientY;\n });\n\n \/\/ Event listener for mouseup\n document.addEventListener('mouseup', () => {\n isMouseDown = false;\n });\n\n \/\/ Event listener for mousemove\n document.addEventListener('mousemove', (event) => {\n if (isMouseDown) {\n let deltaX = event.clientX - lastMouseX;\n let deltaY = event.clientY - lastMouseY;\n\n targetRotationY -= deltaX * 0.01;\n targetRotationX += deltaY * 0.01;\n\n lastMouseX = event.clientX;\n lastMouseY = event.clientY;\n }\n });\n\n \/\/ Animation loop\n function animate() {\n requestAnimationFrame(animate);\n\n \/\/ Glat rotation\n currentRotationY += (targetRotationY - currentRotationY) * 0.1;\n currentRotationX += (targetRotationX - currentRotationX) * 0.1;\n\n \/\/ Gr\u00e6nser for rotation\n currentRotationX = Math.max(-Math.PI \/ 2, Math.min(Math.PI \/ 2, currentRotationX));\n\n \/\/ Opdater kameraets position baseret p\u00e5 rotation\n camera.position.x = 5 * Math.sin(currentRotationY) * Math.cos(currentRotationX);\n camera.position.y = 5 * Math.sin(currentRotationX);\n camera.position.z = 5 * Math.cos(currentRotationY) * Math.cos(currentRotationX);\n camera.lookAt(scene.position);\n\n renderer.render(scene, camera);\n }\n animate();\n\n \/\/ Juster st\u00f8rrelse ved \u00e6ndring af vinduets st\u00f8rrelse\n window.addEventListener('resize', function () {\n const width = window.innerWidth;\n const height = window.innerHeight;\n renderer.setSize(width, height);\n camera.aspect = width \/ height;\n camera.updateProjectionMatrix();\n });\n\n \/\/ Zoom funktion med hjul\n function onDocumentMouseWheel(event) {\n const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));\n camera.position.multiplyScalar(1 + -delta * 0.1);\n camera.updateProjectionMatrix();\n }\n\n document.addEventListener('mousewheel', onDocumentMouseWheel, false);\n document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false); \/\/ for Firefox\n\n <\/script>\n<\/body>\n<\/html>\n\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":"<p>3D Kugle med Tekstur<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1878","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1878"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878\/revisions"}],"predecessor-version":[{"id":2284,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1878\/revisions\/2284"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}