diff --git a/js/globe.js b/js/globe.js index 2e28109..b84e709 100644 --- a/js/globe.js +++ b/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);