diff --git a/js/globe.js b/js/globe.js index 0dba3c3..235584e 100644 --- a/js/globe.js +++ b/js/globe.js @@ -45,7 +45,18 @@ dirLight.position.set(5, 3, 5); scene.add(dirLight); - // three-globe 实例:仅使用空心陆地多边形(hollow globe 风格) + // 节点数据示例(可替换为真实机房经纬度) + var nodes = [ + { name: "Beijing", lat: 39.9, lng: 116.4 }, + { name: "Shanghai", lat: 31.2, lng: 121.5 }, + { name: "Hong Kong", lat: 22.5, lng: 114.1 }, + { name: "Singapore", lat: 1.3, lng: 103.8 }, + { name: "San Francisco", lat: 37.8, lng: -122.4 }, + { name: "Tokyo", lat: 35.7, lng: 139.7 }, + { name: "Frankfurt", lat: 50.1, lng: 8.7 }, + ]; + + // three-globe 实例:使用空心陆地多边形(hollow globe 风格)+ 节点亮点 var globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true, @@ -55,7 +66,18 @@ .showAtmosphere(false) .atmosphereColor("#2b9fff") .atmosphereAltitude(0.18) - .showGraticules(false); + .showGraticules(false) + // 节点亮点:使用 points 层模拟“闪亮节点” + .pointsData(nodes) + .pointColor(function () { + // 比陆地略亮的蓝色,突出节点 + return "#60A5FA"; + }) + // 接近球面的小圆点,而不是高柱子 + .pointAltitude(0.02) + .pointRadius(0.18) + .pointResolution(16) + .pointsTransitionDuration(0); scene.add(globe);