Interaktive Weltraumkarte mit Raumschiff<\/title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: black;\n }\n canvas {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n<canvas id=\"scene\"><\/canvas>\n\n<script type=\"module\">\n import * as THREE from \"https:\/\/unpkg.com\/three@0.165.0\/build\/three.module.js\";\n import { OrbitControls } from \"https:\/\/unpkg.com\/three@0.165.0\/examples\/jsm\/controls\/OrbitControls.js\";\n\n const canvas = document.getElementById(\"scene\");\n const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setClearColor(0x000000, 1);\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(\n 60,\n window.innerWidth \/ window.innerHeight,\n 0.1,\n 2000\n );\n camera.position.set(0, 5, 25);\n\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.target.set(0, 0, 0);\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n\n const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);\n dirLight.position.set(10, 20, 10);\n scene.add(dirLight);\n\n \/\/ Raumschiff als einfache 3D Form\n const ship = new THREE.Group();\n\n const bodyGeo = new THREE.BoxGeometry(4, 1, 10);\n const bodyMat = new THREE.MeshStandardMaterial({\n color: 0x555555,\n metalness: 0.8,\n roughness: 0.3\n });\n const body = new THREE.Mesh(bodyGeo, bodyMat);\n ship.add(body);\n\n const cockpitGeo = new THREE.BoxGeometry(2, 1.2, 3);\n const cockpitMat = new THREE.MeshStandardMaterial({\n color: 0x223344,\n emissive: 0x112244,\n metalness: 0.9,\n roughness: 0.1,\n transparent: true,\n opacity: 0.9\n });\n const cockpit = new THREE.Mesh(cockpitGeo, cockpitMat);\n cockpit.position.set(0, 0.8, -1.5);\n ship.add(cockpit);\n\n const wingGeo = new THREE.BoxGeometry(3, 0.2, 4);\n const wingMat = new THREE.MeshStandardMaterial({\n color: 0x444444,\n metalness: 0.7,\n roughness: 0.4\n });\n\n const leftWing = new THREE.Mesh(wingGeo, wingMat);\n leftWing.position.set(-3, -0.3, 0);\n ship.add(leftWing);\n\n const rightWing = leftWing.clone();\n rightWing.position.x = 3;\n ship.add(rightWing);\n\n const engineGeo = new THREE.CylinderGeometry(0.6, 0.6, 2, 16);\n const engineMat = new THREE.MeshStandardMaterial({\n color: 0x222222,\n emissive: 0x2244ff,\n emissiveIntensity: 0.7\n });\n\n const engineLeft = new THREE.Mesh(engineGeo, engineMat);\n engineLeft.rotation.z = Math.PI \/ 2;\n engineLeft.position.set(-1.5, -0.3, 4.8);\n ship.add(engineLeft);\n\n const engineRight = engineLeft.clone();\n engineRight.position.x = 1.5;\n ship.add(engineRight);\n\n \/\/ Wenn du dein generiertes Raumschiffbild als Sprite nutzen willst:\n \/\/ const textureLoader = new THREE.TextureLoader();\n \/\/ textureLoader.load(\"spaceship.png\", (tex) => {\n \/\/ const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true });\n \/\/ const sprite = new THREE.Sprite(spriteMat);\n \/\/ sprite.scale.set(15, 8, 1);\n \/\/ ship.clear();\n \/\/ ship.add(sprite);\n \/\/ });\n\n ship.position.set(0, 0, 0);\n ship.rotation.x = -0.1;\n scene.add(ship);\n\n \/\/ Sterne als Punktewolke\n const starCount = 3000;\n const starDistance = 1000;\n\n const starGeometry = new THREE.BufferGeometry();\n const positions = new Float32Array(starCount * 3);\n\n for (let i = 0; i < starCount; i++) {\n const i3 = i * 3;\n positions[i3 + 0] = (Math.random() - 0.5) * starDistance;\n positions[i3 + 1] = (Math.random() - 0.5) * starDistance;\n positions[i3 + 2] = -Math.random() * starDistance;\n }\n\n starGeometry.setAttribute(\n \"position\",\n new THREE.BufferAttribute(positions, 3)\n );\n\n const starMaterial = new THREE.PointsMaterial({\n size: 1.5,\n sizeAttenuation: true,\n color: 0xffffff\n });\n\n const stars = new THREE.Points(starGeometry, starMaterial);\n scene.add(stars);\n\n const shipSpeed = 2.0;\n\n function updateStars() {\n const pos = starGeometry.attributes.position.array;\n const len = pos.length;\n\n for (let i = 0; i < len; i += 3) {\n pos[i + 2] += shipSpeed; \/\/ z Richtung auf die Kamera zu\n\n if (pos[i + 2] > 50) {\n pos[i + 0] = (Math.random() - 0.5) * starDistance;\n pos[i + 1] = (Math.random() - 0.5) * starDistance;\n pos[i + 2] = -starDistance;\n }\n }\n starGeometry.attributes.position.needsUpdate = true;\n }\n\n \/\/ leichte Reaktion des Schiffs auf Mausbewegung\n window.addEventListener(\"pointermove\", (event) => {\n const x = event.clientX \/ window.innerWidth - 0.5;\n const y = event.clientY \/ window.innerHeight - 0.5;\n ship.rotation.y = -x * 0.7;\n ship.rotation.x = -0.1 - y * 0.4;\n ship.position.x = x * 5;\n ship.position.y = -y * 3;\n });\n\n window.addEventListener(\"resize\", () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n function animate() {\n requestAnimationFrame(animate);\n\n updateStars();\n controls.update();\n\n camera.position.lerp(\n new THREE.Vector3(ship.position.x, ship.position.y + 5, ship.position.z + 25),\n 0.05\n );\n controls.target.lerp(ship.position, 0.05);\n\n renderer.render(scene, camera);\n }\n\n animate();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Interaktive Weltraumkarte mit Raumschiff<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-659","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":0,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages\/659\/revisions"}],"wp:attachment":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/media?parent=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":659,"date":"2025-12-11T15:17:20","date_gmt":"2025-12-11T14:17:20","guid":{"rendered":"https:\/\/gigaworld.ddns.net\/?page_id=659"},"modified":"2025-12-11T15:25:58","modified_gmt":"2025-12-11T14:25:58","slug":"devins-spielplatz","status":"publish","type":"page","link":"https:\/\/gigaworld.ddns.net\/index.php\/devins-spielplatz\/","title":{"rendered":"Devin\u00b4s Spielplatz"},"content":{"rendered":"\n\n\n\n \n Interaktive Weltraumkarte mit Raumschiff<\/title>\n <style>\n html, body {\n margin: 0;\n padding: 0;\n overflow: hidden;\n background: black;\n }\n canvas {\n display: block;\n }\n <\/style>\n<\/head>\n<body>\n<canvas id=\"scene\"><\/canvas>\n\n<script type=\"module\">\n import * as THREE from \"https:\/\/unpkg.com\/three@0.165.0\/build\/three.module.js\";\n import { OrbitControls } from \"https:\/\/unpkg.com\/three@0.165.0\/examples\/jsm\/controls\/OrbitControls.js\";\n\n const canvas = document.getElementById(\"scene\");\n const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setClearColor(0x000000, 1);\n\n const scene = new THREE.Scene();\n\n const camera = new THREE.PerspectiveCamera(\n 60,\n window.innerWidth \/ window.innerHeight,\n 0.1,\n 2000\n );\n camera.position.set(0, 5, 25);\n\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.05;\n controls.target.set(0, 0, 0);\n\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n scene.add(ambientLight);\n\n const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);\n dirLight.position.set(10, 20, 10);\n scene.add(dirLight);\n\n \/\/ Raumschiff als einfache 3D Form\n const ship = new THREE.Group();\n\n const bodyGeo = new THREE.BoxGeometry(4, 1, 10);\n const bodyMat = new THREE.MeshStandardMaterial({\n color: 0x555555,\n metalness: 0.8,\n roughness: 0.3\n });\n const body = new THREE.Mesh(bodyGeo, bodyMat);\n ship.add(body);\n\n const cockpitGeo = new THREE.BoxGeometry(2, 1.2, 3);\n const cockpitMat = new THREE.MeshStandardMaterial({\n color: 0x223344,\n emissive: 0x112244,\n metalness: 0.9,\n roughness: 0.1,\n transparent: true,\n opacity: 0.9\n });\n const cockpit = new THREE.Mesh(cockpitGeo, cockpitMat);\n cockpit.position.set(0, 0.8, -1.5);\n ship.add(cockpit);\n\n const wingGeo = new THREE.BoxGeometry(3, 0.2, 4);\n const wingMat = new THREE.MeshStandardMaterial({\n color: 0x444444,\n metalness: 0.7,\n roughness: 0.4\n });\n\n const leftWing = new THREE.Mesh(wingGeo, wingMat);\n leftWing.position.set(-3, -0.3, 0);\n ship.add(leftWing);\n\n const rightWing = leftWing.clone();\n rightWing.position.x = 3;\n ship.add(rightWing);\n\n const engineGeo = new THREE.CylinderGeometry(0.6, 0.6, 2, 16);\n const engineMat = new THREE.MeshStandardMaterial({\n color: 0x222222,\n emissive: 0x2244ff,\n emissiveIntensity: 0.7\n });\n\n const engineLeft = new THREE.Mesh(engineGeo, engineMat);\n engineLeft.rotation.z = Math.PI \/ 2;\n engineLeft.position.set(-1.5, -0.3, 4.8);\n ship.add(engineLeft);\n\n const engineRight = engineLeft.clone();\n engineRight.position.x = 1.5;\n ship.add(engineRight);\n\n \/\/ Wenn du dein generiertes Raumschiffbild als Sprite nutzen willst:\n \/\/ const textureLoader = new THREE.TextureLoader();\n \/\/ textureLoader.load(\"spaceship.png\", (tex) => {\n \/\/ const spriteMat = new THREE.SpriteMaterial({ map: tex, transparent: true });\n \/\/ const sprite = new THREE.Sprite(spriteMat);\n \/\/ sprite.scale.set(15, 8, 1);\n \/\/ ship.clear();\n \/\/ ship.add(sprite);\n \/\/ });\n\n ship.position.set(0, 0, 0);\n ship.rotation.x = -0.1;\n scene.add(ship);\n\n \/\/ Sterne als Punktewolke\n const starCount = 3000;\n const starDistance = 1000;\n\n const starGeometry = new THREE.BufferGeometry();\n const positions = new Float32Array(starCount * 3);\n\n for (let i = 0; i < starCount; i++) {\n const i3 = i * 3;\n positions[i3 + 0] = (Math.random() - 0.5) * starDistance;\n positions[i3 + 1] = (Math.random() - 0.5) * starDistance;\n positions[i3 + 2] = -Math.random() * starDistance;\n }\n\n starGeometry.setAttribute(\n \"position\",\n new THREE.BufferAttribute(positions, 3)\n );\n\n const starMaterial = new THREE.PointsMaterial({\n size: 1.5,\n sizeAttenuation: true,\n color: 0xffffff\n });\n\n const stars = new THREE.Points(starGeometry, starMaterial);\n scene.add(stars);\n\n const shipSpeed = 2.0;\n\n function updateStars() {\n const pos = starGeometry.attributes.position.array;\n const len = pos.length;\n\n for (let i = 0; i < len; i += 3) {\n pos[i + 2] += shipSpeed; \/\/ z Richtung auf die Kamera zu\n\n if (pos[i + 2] > 50) {\n pos[i + 0] = (Math.random() - 0.5) * starDistance;\n pos[i + 1] = (Math.random() - 0.5) * starDistance;\n pos[i + 2] = -starDistance;\n }\n }\n starGeometry.attributes.position.needsUpdate = true;\n }\n\n \/\/ leichte Reaktion des Schiffs auf Mausbewegung\n window.addEventListener(\"pointermove\", (event) => {\n const x = event.clientX \/ window.innerWidth - 0.5;\n const y = event.clientY \/ window.innerHeight - 0.5;\n ship.rotation.y = -x * 0.7;\n ship.rotation.x = -0.1 - y * 0.4;\n ship.position.x = x * 5;\n ship.position.y = -y * 3;\n });\n\n window.addEventListener(\"resize\", () => {\n camera.aspect = window.innerWidth \/ window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n function animate() {\n requestAnimationFrame(animate);\n\n updateStars();\n controls.update();\n\n camera.position.lerp(\n new THREE.Vector3(ship.position.x, ship.position.y + 5, ship.position.z + 25),\n 0.05\n );\n controls.target.lerp(ship.position, 0.05);\n\n renderer.render(scene, camera);\n }\n\n animate();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Interaktive Weltraumkarte mit Raumschiff<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-659","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages\/659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/comments?post=659"}],"version-history":[{"count":0,"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/pages\/659\/revisions"}],"wp:attachment":[{"href":"https:\/\/gigaworld.ddns.net\/index.php\/wp-json\/wp\/v2\/media?parent=659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}