diff --git a/css/index.css b/css/index.css index 160443e..04d29d0 100644 --- a/css/index.css +++ b/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; } } diff --git a/js/globe.js b/js/globe.js index 726459b..9e7aa48 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.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") {