diff --git a/js/globe.js b/js/globe.js index ae9d964..047548a 100644 --- a/js/globe.js +++ b/js/globe.js @@ -70,13 +70,19 @@ }; }); - // three-globe 实例(仅使用其数据层,大气层和坐标系) + // three-globe 实例:使用内置贴图 + 大气层 + 节点 + 飞线 var globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true, }) - // 隐藏 three-globe 默认球体,我们自己画一个实心地球 - .showGlobe(false) + // 使用 three-globe 示例贴图:蓝色地球 + 地形凹凸 + .globeImageUrl( + "https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg" + ) + .bumpImageUrl( + "https://unpkg.com/three-globe/example/img/earth-topology.png" + ) + .showGlobe(true) .showAtmosphere(true) .atmosphereColor("#2b9fff") .atmosphereAltitude(0.18) @@ -102,25 +108,6 @@ scene.add(globe); - // 自绘一个实心地球球体,避免默认球体材质透明或贴图问题 - try { - 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, - }); - var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); - // 将地球球体挂到 three-globe 对象上,保证与节点/弧线共用坐标系 - globe.add(earthMesh); - } catch (e) { - console.warn("[Globe] failed to create custom earth sphere:", e); - } - // 暴露给调试用 if (typeof window !== "undefined") { window.__globe = globe;