3

css/index.css

@@ -4,7 +4,7 @@
   width: 100%;
   overflow: hidden;
   /* 确保 3D 地球在竖直方向不会被裁剪，预留更大展示区域 */
-  min-height: 480px;
+  min-height: 520px;
 }
 
 .banner-cont .swiper-slide {
@@ -76,9 +76,9 @@
   top: 50%;
   right: 6%;              /* 略向中间移动一点，留出更大的展示区域 */
   transform: translateY(-50%);
-  /* 大幅缩小球体显示区域 */
-  width: 220px;
-  height: 220px;
+  /* 展示区域足够大，球体本身通过 three.js 缩放变小 */
+  width: 420px;
+  height: 420px;
   z-index: 20;            /* 高于轮播图与文案层 */
   pointer-events: none;   /* 不影响轮播图滑动与点击 */
 }
@@ -87,8 +87,8 @@
 @media (max-width: 1400px) {
   .banner-globe {
     right: 4%;
-    width: 200px;
-    height: 200px;
+    width: 360px;
+    height: 360px;
   }
 }
 

js/globe.js

@@ -28,8 +28,8 @@
     var scene = new THREE.Scene();
 
     var camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000);
-    // 稍微偏右俯视一点，进一步拉远让球体看起来更小
-    camera.position.set(0, 0.3, 8.0);
+    // 稍微偏右俯视一点，拉远一点，同时后续通过缩放缩小球体本身
+    camera.position.set(0, 0.25, 5.5);
     camera.lookAt(0, 0, 0);
 
     var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
@@ -102,6 +102,9 @@
 
     scene.add(globe);
 
+    // 缩小整个地球及其节点/飞线，让球体在较大的展示区域中整体变小
+    globe.scale.set(0.6, 0.6, 0.6);
+
     // 按 hollow-globe 风格加载陆地多边形，绘制空心地球轮廓
     (function loadLandPolygons() {
       if (typeof topojson === "undefined") {