大法

index.html

@@ -5,8 +5,7 @@
 
 <!-- 首页脚本 -->
 <script src="/web/BlackFruit-web/js/index.js"></script>
-<!-- 3D 地球依赖：Three.js 和 three-globe（使用 CDN 版本方便预览效果） -->
-<script src="https://unpkg.com/three@0.155.0/build/three.min.js"></script>
+<!-- 3D 地球依赖：three-globe（Three.js 由业务系统全局引入，避免多份 THREE 冲突） -->
 <script src="https://unpkg.com/three-globe@2.45.0/dist/three-globe.min.js"></script>
 <!-- 3D 地球效果脚本（基于 three-globe） -->
 <script src="/web/BlackFruit-web/js/globe.js"></script>

js/globe.js

@@ -75,9 +75,8 @@
       waitForGlobeReady: true,
       animateIn: true,
     })
-      // 不使用外部贴图，改用自定义材质，避免贴图加载或权限问题导致地球不可见
-      .globeImageUrl(null)
-      .bumpImageUrl(null)
+      // 显示球体本身和大气层
+      .showGlobe(true)
       .showAtmosphere(true)
       .atmosphereColor("#2b9fff")
       .atmosphereAltitude(0.18)
@@ -103,19 +102,17 @@
 
     scene.add(globe);
 
-    // 放大地球整体，让主体更突出
-    globe.scale.set(1.4, 1.4, 1.4);
-
-    // 自定义地球材质，使用渐变蓝色球体，避免依赖贴图
+    // 替换地球材质，使用自定义 MeshPhongMaterial，避免贴图导致的透明问题
     try {
-      var globeMat = globe.globeMaterial && globe.globeMaterial();
-      if (globeMat) {
-        globeMat.color = new THREE.Color("#163a5f");       // 基础色
-        globeMat.emissive = new THREE.Color("#061727");    // 自发光
-        globeMat.specular = new THREE.Color("#3aaefc");    // 高光
-        globeMat.shininess = 40;
-        globeMat.needsUpdate = true;
-      }
+      var baseMaterial = new THREE.MeshPhongMaterial({
+        color: new THREE.Color("#163a5f"),      // 基础色：深蓝
+        emissive: new THREE.Color("#040915"),   // 自发光：微亮
+        specular: new THREE.Color("#3aaefc"),   // 高光：亮蓝
+        shininess: 40,
+        transparent: false,
+        opacity: 1,
+      });
+      globe.globeMaterial(baseMaterial);
     } catch (e) {
       console.warn("[Globe] failed to tweak globe material:", e);
     }