1

js/globe.js

@@ -70,13 +70,13 @@
         };
       });
 
-    // three-globe 实例
+    // three-globe 实例（仅使用其数据层，大气层和坐标系）
     var globe = new ThreeGlobe({
       waitForGlobeReady: true,
       animateIn: true,
     })
-      // 显示球体本身和大气层
+      // 隐藏 three-globe 默认球体，我们自己画一个实心地球
-      .showGlobe(true)
+      .showGlobe(false)
       .showAtmosphere(true)
       .atmosphereColor("#2b9fff")
       .atmosphereAltitude(0.18)
@@ -102,9 +102,11 @@
 
     scene.add(globe);
 
-    // 替换地球材质，使用自定义 MeshPhongMaterial，避免贴图导致的透明问题
+    // 自绘一个实心地球球体，避免默认球体材质透明或贴图问题
     try {
-      var baseMaterial = new THREE.MeshPhongMaterial({
+      var earthRadius = 1; // three-globe 使用的半径单位
+      var earthGeometry = new THREE.SphereGeometry(earthRadius, 64, 64);
+      var earthMaterial = new THREE.MeshPhongMaterial({
         color: new THREE.Color("#163a5f"),    // 基础色：深蓝
         emissive: new THREE.Color("#040915"), // 自发光：微亮
         specular: new THREE.Color("#3aaefc"), // 高光：亮蓝
@@ -112,9 +114,11 @@
         transparent: false,
         opacity: 1,
       });
-      globe.globeMaterial(baseMaterial);
+      var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
+      // 将地球球体挂到 three-globe 对象上，保证与节点/弧线共用坐标系
+      globe.add(earthMesh);
     } catch (e) {
-      console.warn("[Globe] failed to tweak globe material:", e);
+      console.warn("[Globe] failed to create custom earth sphere:", e);
     }
 
     // 暴露给调试用