diff --git a/css/index.css b/css/index.css index 47c5cf2..d8c8113 100644 --- a/css/index.css +++ b/css/index.css @@ -76,8 +76,9 @@ top: 50%; right: 6%; /* 略向中间移动一点,留出更大的展示区域 */ transform: translateY(-50%); - width: 420px; - height: 420px; + /* 缩小一点,避免球体超出可视区域 */ + width: 360px; + height: 360px; z-index: 20; /* 高于轮播图与文案层 */ pointer-events: none; /* 不影响轮播图滑动与点击 */ } @@ -86,8 +87,8 @@ @media (max-width: 1400px) { .banner-globe { right: 4%; - width: 360px; - height: 360px; + width: 320px; + height: 320px; } } diff --git a/js/globe.js b/js/globe.js index 408ce74..6ffd9f0 100644 --- a/js/globe.js +++ b/js/globe.js @@ -27,9 +27,9 @@ // 基础 Three.js 场景 var scene = new THREE.Scene(); - var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); - // 稍微偏右俯视一点 - camera.position.set(0, 0.4, 4.0); + var camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 1000); + // 稍微偏右俯视一点,拉远一点避免球体被裁剪 + camera.position.set(0, 0.3, 4.8); camera.lookAt(0, 0, 0); var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });