diff --git a/index.html b/index.html index 7f69caf..2fbbc91 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,7 @@ - - + diff --git a/js/globe.js b/js/globe.js index 9710259..8fe4518 100644 --- a/js/globe.js +++ b/js/globe.js @@ -75,9 +75,8 @@ waitForGlobeReady: true, animateIn: true, }) - // 不使用外部贴图,改用自定义材质,避免贴图加载或权限问题导致地球不可见 - .globeImageUrl(null) - .bumpImageUrl(null) + // 显示球体本身和大气层 + .showGlobe(true) .showAtmosphere(true) .atmosphereColor("#2b9fff") .atmosphereAltitude(0.18) @@ -103,19 +102,17 @@ scene.add(globe); - // 放大地球整体,让主体更突出 - globe.scale.set(1.4, 1.4, 1.4); - - // 自定义地球材质,使用渐变蓝色球体,避免依赖贴图 + // 替换地球材质,使用自定义 MeshPhongMaterial,避免贴图导致的透明问题 try { - var globeMat = globe.globeMaterial && globe.globeMaterial(); - if (globeMat) { - globeMat.color = new THREE.Color("#163a5f"); // 基础色 - globeMat.emissive = new THREE.Color("#061727"); // 自发光 - globeMat.specular = new THREE.Color("#3aaefc"); // 高光 - globeMat.shininess = 40; - globeMat.needsUpdate = true; - } + var baseMaterial = new THREE.MeshPhongMaterial({ + color: new THREE.Color("#163a5f"), // 基础色:深蓝 + emissive: new THREE.Color("#040915"), // 自发光:微亮 + specular: new THREE.Color("#3aaefc"), // 高光:亮蓝 + shininess: 40, + transparent: false, + opacity: 1, + }); + globe.globeMaterial(baseMaterial); } catch (e) { console.warn("[Globe] failed to tweak globe material:", e); }