www

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,14 +70,14 @@
         };
       });
 
-    // three-globe 实例：使用大气层 + 节点 + 飞线（球体主体我们自己绘制，避免外部贴图受限）
+    // three-globe 实例：使用大气层 + 节点 + 飞线 + 空心陆地多边形
     var globe = new ThreeGlobe({
       waitForGlobeReady: true,
       animateIn: true,
     })
-      // 不使用 three-globe 内置球体与贴图，避免外网访问受限导致地球主体缺失
+      // 不使用 three-globe 内置球体贴图，只保留大气层，陆地轮廓由 polygons 层绘制
       .showGlobe(false)
-      .showAtmosphere(true)
+      .showAtmosphere(false)
       .atmosphereColor("#2b9fff")
       .atmosphereAltitude(0.18)
       .showGraticules(false)
@@ -102,57 +102,51 @@
 
     scene.add(globe);
 
-    // 自绘一颗更有科技感的蓝色地球（实心球 + 网格线 + 赤道光环）
+    // 按 hollow-globe 风格加载陆地多边形，绘制空心地球轮廓
-    try {
+    (function loadLandPolygons() {
-      var earthRadius = 1; // three-globe 默认半径单位
+      if (typeof topojson === "undefined") {
-
+        console.warn(
-      // 实心球体主体
+          "[Globe] topojson-client is undefined, unable to render hollow globe polygons"
-      var earthGeometry = new THREE.SphereGeometry(earthRadius, 80, 80);
-      var earthMaterial = new THREE.MeshPhongMaterial({
-        color: new THREE.Color("#0a1024"),     // 深蓝底色
-        emissive: new THREE.Color("#050814"),  // 微弱自发光
-        specular: new THREE.Color("#3aaefc"),  // 高光偏蓝
-        shininess: 55,
-        transparent: false,
-        opacity: 1,
-      });
-      var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
-      globe.add(earthMesh);
-
-      // 经纬线网格（wireframe），增加科技感
-      var gridGeometry = new THREE.SphereGeometry(
-        earthRadius * 1.002,
-        32,
-        32
         );
-      var gridMaterial = new THREE.MeshBasicMaterial({
+        return;
-        color: 0x2f7fff,
-        wireframe: true,
-        transparent: true,
-        opacity: 0.35,
-      });
-      var gridMesh = new THREE.Mesh(gridGeometry, gridMaterial);
-      globe.add(gridMesh);
-
-      // 赤道光环
-      var ringGeometry = new THREE.RingGeometry(
-        earthRadius * 1.05,
-        earthRadius * 1.25,
-        64
-      );
-      var ringMaterial = new THREE.MeshBasicMaterial({
-        color: 0x2f7fff,
-        transparent: true,
-        opacity: 0.22,
-        side: THREE.DoubleSide,
-      });
-      var ringMesh = new THREE.Mesh(ringGeometry, ringMaterial);
-      ringMesh.rotation.x = Math.PI / 2; // 放到赤道平面
-      globe.add(ringMesh);
-    } catch (e) {
-      console.warn("[Globe] failed to create custom earth sphere:", e);
       }
 
+      // 请确保 /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;