force override

css/index.css

@@ -3,6 +3,8 @@
   position: relative;
   width: 100%;
   overflow: hidden;
+  /* 确保 3D 地球在竖直方向不会被裁剪 */
+  min-height: 420px;
 }
 
 .banner-cont .swiper-slide {
@@ -74,8 +76,8 @@
   top: 50%;
   right: 8%;              /* 根据视觉调节，让地球更靠中间一点 */
   transform: translateY(-50%);
-  width: 420px;
+  width: 360px;
-  height: 420px;
+  height: 360px;
   z-index: 20;            /* 高于轮播图与文案层 */
   pointer-events: none;   /* 不影响轮播图滑动与点击 */
 }
@@ -84,8 +86,8 @@
 @media (max-width: 1400px) {
   .banner-globe {
     right: 4%;
-    width: 360px;
+    width: 320px;
-    height: 360px;
+    height: 320px;
   }
 }
 

index.html

@@ -8,6 +8,8 @@
 <!-- 3D 地球依赖：Three.js 和 three-globe（顺序不能反） -->
 <script src="https://unpkg.com/three@0.155.0/build/three.min.js"></script>
 <script src="https://unpkg.com/three-globe@2.45.0/dist/three-globe.min.js"></script>
+<!-- TopoJSON 客户端，用于将 land-110m 拓扑数据转换为 GeoJSON 多边形 -->
+<script src="https://cdn.jsdelivr.net/npm/topojson-client@3/dist/topojson-client.min.js"></script>
 <!-- 3D 地球效果脚本（基于 three-globe） -->
 <script src="/web/BlackFruit-web/js/globe.js"></script>
 <script src="/web/BlackFruit-web/js/viewer.min.js"></script>

js/globe.js

@@ -70,20 +70,14 @@
         };
       });
 
-    // three-globe 实例：使用内置贴图 + 大气层 + 节点 + 飞线
+    // three-globe 实例：使用大气层 + 节点 + 飞线 + 空心陆地多边形
     var globe = new ThreeGlobe({
       waitForGlobeReady: true,
       animateIn: true,
     })
-      // 使用 three-globe 示例贴图：蓝色地球 + 地形凹凸
+      // 不使用 three-globe 内置球体贴图，只保留大气层，陆地轮廓由 polygons 层绘制
-      .globeImageUrl(
+      .showGlobe(false)
-        "https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg"
+      .showAtmosphere(false)
-      )
-      .bumpImageUrl(
-        "https://unpkg.com/three-globe/example/img/earth-topology.png"
-      )
-      .showGlobe(true)
-      .showAtmosphere(true)
       .atmosphereColor("#2b9fff")
       .atmosphereAltitude(0.18)
       .showGraticules(false)
@@ -108,6 +102,51 @@
 
     scene.add(globe);
 
+    // 按 hollow-globe 风格加载陆地多边形，绘制空心地球轮廓
+    (function loadLandPolygons() {
+      if (typeof topojson === "undefined") {
+        console.warn(
+          "[Globe] topojson-client is undefined, unable to render hollow globe polygons"
+        );
+        return;
+      }
+
+      // 请确保 /web/BlackFruit-web/assets/data/land-110m.json 存在，
+      // 内容为你刚才提供的 Topology JSON。
+      fetch("/web/BlackFruit-web/assets/data/land-110m.json")
+        .then(function (res) {
+          return res.json();
+        })
+        .then(function (landTopo) {
+          try {
+            var landGeo = topojson.feature(
+              landTopo,
+              landTopo.objects.land
+            ).features;
+
+            globe
+              .polygonsData(landGeo)
+              .polygonCapMaterial(
+                new THREE.MeshLambertMaterial({
+                  color: "darkslategrey",
+                  side: THREE.DoubleSide,
+                })
+              )
+              .polygonSideColor(function () {
+                return "rgba(0,0,0,0)";
+              });
+          } catch (e) {
+            console.warn("[Globe] failed to parse land-110m topology:", e);
+          }
+        })
+        .catch(function (err) {
+          console.warn(
+            "[Globe] failed to load /web/BlackFruit-web/assets/data/land-110m.json:",
+            err
+          );
+        });
+    })();
+
     // 暴露给调试用
     if (typeof window !== "undefined") {
       window.__globe = globe;