d

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.2, 6.0);
+    // 初始视角，具体距离在 globe 准备好后根据半径自动调整
+    camera.position.set(0, 0.2, 8.0);
     camera.lookAt(0, 0, 0);
 
     var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
@@ -102,9 +102,25 @@
 
     scene.add(globe);
 
-    // 缩小整个地球及其节点/飞线，让球体在较大的展示区域中整体变小
-    // 之前是 0.6 / 0.5，这里进一步缩小到 0.2，避免撑满画布
-    globe.scale.set(0.2, 0.2, 0.2);
+    // 告诉 three-globe 当前渲染器的实际尺寸，避免默认按全窗口大小计算导致比例失真
+    if (typeof globe.rendererSize === "function") {
+      globe.rendererSize(new THREE.Vector2(width, height));
+    }
+
+    // 在 globe 初始化完成后，根据实际半径自动调整相机距离，保证整球落在视野内
+    if (typeof globe.onGlobeReady === "function" && typeof globe.getGlobeRadius === "function") {
+      globe.onGlobeReady(function () {
+        var r = globe.getGlobeRadius(); // three-globe 内部使用的球半径
+        // 经验：以半径的约 3 倍距离拍摄，配合 40° 视角，可以完整显示球体并留一定留白
+        var dist = r * 3.2;
+        camera.position.set(0, 0.2, dist);
+        camera.lookAt(0, 0, 0);
+        // 通知 three-globe 当前视角，用于部分图层的内部计算
+        if (typeof globe.setPointOfView === "function") {
+          globe.setPointOfView(camera);
+        }
+      });
+    }
 
     // 按 hollow-globe 风格加载陆地多边形，绘制空心地球轮廓
     (function loadLandPolygons() {
@@ -192,6 +208,10 @@
       camera.aspect = w / h;
       camera.updateProjectionMatrix();
       renderer.setSize(w, h);
+      // 同步 three-globe 对 renderer 尺寸的感知，保证缩放比例一致
+      if (typeof globe.rendererSize === "function") {
+        globe.rendererSize(new THREE.Vector2(w, h));
+      }
     }
     window.addEventListener("resize", onResize);