diff --git a/js/globe.js b/js/globe.js index 047548a..db4b91b 100644 --- a/js/globe.js +++ b/js/globe.js @@ -70,19 +70,13 @@ }; }); - // three-globe 实例:使用内置贴图 + 大气层 + 节点 + 飞线 + // three-globe 实例:使用大气层 + 节点 + 飞线(球体主体我们自己绘制,避免外部贴图受限) var globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true, }) - // 使用 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) + // 不使用 three-globe 内置球体与贴图,避免外网访问受限导致地球主体缺失 + .showGlobe(false) .showAtmosphere(true) .atmosphereColor("#2b9fff") .atmosphereAltitude(0.18) @@ -108,6 +102,57 @@ scene.add(globe); + // 自绘一颗更有科技感的蓝色地球(实心球 + 网格线 + 赤道光环) + try { + var earthRadius = 1; // three-globe 默认半径单位 + + // 实心球体主体 + var earthGeometry = new THREE.SphereGeometry(earthRadius, 80, 80); + var earthMaterial = new THREE.MeshPhongMaterial({ + color: new THREE.Color("#0a1024"), // 深蓝底色 + emissive: new THREE.Color("#050814"), // 微弱自发光 + specular: new THREE.Color("#3aaefc"), // 高光偏蓝 + shininess: 55, + transparent: false, + opacity: 1, + }); + var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); + globe.add(earthMesh); + + // 经纬线网格(wireframe),增加科技感 + var gridGeometry = new THREE.SphereGeometry( + earthRadius * 1.002, + 32, + 32 + ); + var gridMaterial = new THREE.MeshBasicMaterial({ + color: 0x2f7fff, + wireframe: true, + transparent: true, + opacity: 0.35, + }); + var gridMesh = new THREE.Mesh(gridGeometry, gridMaterial); + globe.add(gridMesh); + + // 赤道光环 + var ringGeometry = new THREE.RingGeometry( + earthRadius * 1.05, + earthRadius * 1.25, + 64 + ); + var ringMaterial = new THREE.MeshBasicMaterial({ + color: 0x2f7fff, + transparent: true, + opacity: 0.22, + side: THREE.DoubleSide, + }); + var ringMesh = new THREE.Mesh(ringGeometry, ringMaterial); + ringMesh.rotation.x = Math.PI / 2; // 放到赤道平面 + globe.add(ringMesh); + } catch (e) { + console.warn("[Globe] failed to create custom earth sphere:", e); + } + // 暴露给调试用 if (typeof window !== "undefined") { window.__globe = globe;