Voyager 3d eingebaut

public/solarsystem.php

@@ -558,6 +558,8 @@ if (!AstronomyEngine) {
 }
 
 let THREE;
+let GLTFLoaderClass;
+let DRACOLoaderClass;
 let textureLoader;
 let renderer;
 let scene;
@@ -580,6 +582,8 @@ let voyager2Objects = null;
 let voyager2LabelElement = null;
 let newHorizonsObjects = null;
 let newHorizonsLabelElement = null;
+let voyagerModelTemplatePromise = null;
+let voyagerModelTemplate = null;
 const planetDynamicsCache = new Map();
 
 let showOrbits = true;
@@ -646,6 +650,77 @@ function updateSpeedFromSlider() {
   speedLabel.textContent = normalizedSpeedText(speedDaysPerSecond);
 }
 
+async function loadVoyagerModelTemplate() {
+  if (voyagerModelTemplatePromise) {
+    return voyagerModelTemplatePromise;
+  }
+
+  if (!GLTFLoaderClass) {
+    return null;
+  }
+
+  const loader = new GLTFLoaderClass();
+  if (DRACOLoaderClass) {
+    const dracoLoader = new DRACOLoaderClass();
+    dracoLoader.setDecoderPath('./js/libs/draco/');
+    loader.setDRACOLoader(dracoLoader);
+  }
+  voyagerModelTemplatePromise = new Promise((resolve) => {
+    loader.load(
+      './images/3DModels/voyager.glb',
+      (gltf) => {
+        const template = gltf.scene;
+        template.traverse((node) => {
+          if (!node.isMesh) {
+            return;
+          }
+          node.castShadow = false;
+          node.receiveShadow = false;
+        });
+        voyagerModelTemplate = template;
+        resolve(template);
+      },
+      undefined,
+      (error) => {
+        console.warn('Voyager-Modell konnte nicht geladen werden, Fallback wird verwendet.', error);
+        voyagerModelTemplate = null;
+        resolve(null);
+      }
+    );
+  });
+
+  return voyagerModelTemplatePromise;
+}
+
+function createVoyagerFallbackMesh(color, emissive) {
+  const mesh = new THREE.Mesh(
+    new THREE.SphereGeometry(0.28, 20, 20),
+    new THREE.MeshStandardMaterial({
+      color: new THREE.Color(color),
+      emissive: new THREE.Color(emissive),
+      emissiveIntensity: 0.45,
+      roughness: 0.45,
+      metalness: 0.7,
+    })
+  );
+  mesh.userData.baseScale = 1;
+  mesh.userData.minScaleMultiplier = 1.8;
+  return mesh;
+}
+
+function createVoyagerDisplayObject(color, emissive) {
+  if (voyagerModelTemplate) {
+    const model = voyagerModelTemplate.clone(true);
+    model.scale.setScalar(0.16);
+    model.rotation.x = Math.PI / 2;
+    model.userData.baseScale = 1;
+    model.userData.minScaleMultiplier = 1.8;
+    return model;
+  }
+
+  return createVoyagerFallbackMesh(color, emissive);
+}
+
 function adjustSpeedSliderFromWheel(event) {
   if (!speedSlider) {
     return;
@@ -1400,18 +1475,7 @@ function ensureVoyager1Objects() {
   orbitLine.visible = showOrbits;
   scene.add(orbitLine);
 
-  const mesh = new THREE.Mesh(
-    new THREE.SphereGeometry(0.28, 20, 20),
-    new THREE.MeshStandardMaterial({
-      color: new THREE.Color('#b7f0ff'),
-      emissive: new THREE.Color('#4db5d4'),
-      emissiveIntensity: 0.45,
-      roughness: 0.45,
-      metalness: 0.7,
-    })
-  );
-  mesh.userData.baseScale = 1;
-  mesh.userData.minScaleMultiplier = 1.8;
+  const mesh = createVoyagerDisplayObject('#b7f0ff', '#4db5d4');
   scene.add(mesh);
 
   voyager1Objects = { orbitLine, mesh, labelElement: voyager1LabelElement };
@@ -1472,7 +1536,6 @@ function updateVoyager1Visual() {
     z: Number(position.zAu),
     r: Math.max(Number(position.distanceAu), 1e-9),
   }));
-  voyager1Objects.mesh.rotation.y = (simDate.getTime() / 1000) * 0.0004;
   voyager1Objects.orbitLine.visible = showOrbits;
 
   if (focusedVoyager1) {
@@ -1496,18 +1559,7 @@ function ensureVoyager2Objects() {
   orbitLine.visible = showOrbits;
   scene.add(orbitLine);
 
-  const mesh = new THREE.Mesh(
-    new THREE.SphereGeometry(0.28, 20, 20),
-    new THREE.MeshStandardMaterial({
-      color: new THREE.Color('#ffe4a6'),
-      emissive: new THREE.Color('#d4972e'),
-      emissiveIntensity: 0.45,
-      roughness: 0.45,
-      metalness: 0.7,
-    })
-  );
-  mesh.userData.baseScale = 1;
-  mesh.userData.minScaleMultiplier = 1.8;
+  const mesh = createVoyagerDisplayObject('#ffe4a6', '#d4972e');
   scene.add(mesh);
 
   voyager2Objects = { orbitLine, mesh, labelElement: voyager2LabelElement };
@@ -1568,7 +1620,6 @@ function updateVoyager2Visual() {
     z: Number(position.zAu),
     r: Math.max(Number(position.distanceAu), 1e-9),
   }));
-  voyager2Objects.mesh.rotation.y = (simDate.getTime() / 1000) * 0.0004;
   voyager2Objects.orbitLine.visible = showOrbits;
 
   if (focusedVoyager2) {
@@ -1664,7 +1715,6 @@ function updateNewHorizonsVisual() {
     z: Number(position.zAu),
     r: Math.max(Number(position.distanceAu), 1e-9),
   }));
-  newHorizonsObjects.mesh.rotation.y = (simDate.getTime() / 1000) * 0.0004;
   newHorizonsObjects.orbitLine.visible = showOrbits;
 
   if (focusedNewHorizons) {
@@ -2700,7 +2750,7 @@ function pickPlanet(clientX, clientY) {
   }
 
   if (voyager1Objects && voyager1Objects.mesh.visible) {
-    const voyagerHits = raycaster.intersectObject(voyager1Objects.mesh, false);
+    const voyagerHits = raycaster.intersectObject(voyager1Objects.mesh, true);
     if (voyagerHits.length > 0) {
       focusedPlanetKey = null;
       focusedMinorPlanetId = null;
@@ -2717,7 +2767,7 @@ function pickPlanet(clientX, clientY) {
   }
 
   if (voyager2Objects && voyager2Objects.mesh.visible) {
-    const voyager2Hits = raycaster.intersectObject(voyager2Objects.mesh, false);
+    const voyager2Hits = raycaster.intersectObject(voyager2Objects.mesh, true);
     if (voyager2Hits.length > 0) {
       focusedPlanetKey = null;
       focusedMinorPlanetId = null;
@@ -2734,7 +2784,7 @@ function pickPlanet(clientX, clientY) {
   }
 
   if (newHorizonsObjects && newHorizonsObjects.mesh.visible) {
-    const newHorizonsHits = raycaster.intersectObject(newHorizonsObjects.mesh, false);
+    const newHorizonsHits = raycaster.intersectObject(newHorizonsObjects.mesh, true);
     if (newHorizonsHits.length > 0) {
       focusedPlanetKey = null;
       focusedMinorPlanetId = null;
@@ -3056,6 +3106,8 @@ function animate() {
 async function initSolarSystem() {
   try {
     THREE = await import('./js/three.module.js');
+    ({ GLTFLoader: GLTFLoaderClass } = await import('./js/GLTFLoader.js'));
+    ({ DRACOLoader: DRACOLoaderClass } = await import('./js/DRACOLoader.js'));
     textureLoader = new THREE.TextureLoader();
 
     renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
@@ -3165,6 +3217,7 @@ async function initSolarSystem() {
     createEclipticPlane();
 
     buildLabels();
+    await loadVoyagerModelTemplate();
     PLANETS.forEach(createPlanetMesh);
     ensureMoonObjects();
     ensureMinorPlanetObjects();