diff --git a/js/globe.js b/js/globe.js index 8fe4518..ae9d964 100644 --- a/js/globe.js +++ b/js/globe.js @@ -70,13 +70,13 @@ }; }); - // three-globe 实例 + // three-globe 实例(仅使用其数据层,大气层和坐标系) var globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true, }) - // 显示球体本身和大气层 - .showGlobe(true) + // 隐藏 three-globe 默认球体,我们自己画一个实心地球 + .showGlobe(false) .showAtmosphere(true) .atmosphereColor("#2b9fff") .atmosphereAltitude(0.18) @@ -102,19 +102,23 @@ scene.add(globe); - // 替换地球材质,使用自定义 MeshPhongMaterial,避免贴图导致的透明问题 + // 自绘一个实心地球球体,避免默认球体材质透明或贴图问题 try { - var baseMaterial = new THREE.MeshPhongMaterial({ - color: new THREE.Color("#163a5f"), // 基础色:深蓝 - emissive: new THREE.Color("#040915"), // 自发光:微亮 - specular: new THREE.Color("#3aaefc"), // 高光:亮蓝 + var earthRadius = 1; // three-globe 使用的半径单位 + var earthGeometry = new THREE.SphereGeometry(earthRadius, 64, 64); + var earthMaterial = 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); + var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); + // 将地球球体挂到 three-globe 对象上,保证与节点/弧线共用坐标系 + globe.add(earthMesh); } catch (e) { - console.warn("[Globe] failed to tweak globe material:", e); + console.warn("[Globe] failed to create custom earth sphere:", e); } // 暴露给调试用