This commit is contained in:
77
js/globe.js
77
js/globe.js
@@ -45,32 +45,7 @@
|
||||
dirLight.position.set(5, 3, 5);
|
||||
scene.add(dirLight);
|
||||
|
||||
// 示例节点数据(可后续替换为真实机房经纬度)
|
||||
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: "Berlin", lat: 52.5, lng: 13.4 },
|
||||
{ name: "Tokyo", lat: 35.7, lng: 139.7 },
|
||||
];
|
||||
|
||||
// 示例 arcs:从北京发出到其他节点
|
||||
var arcs = nodes
|
||||
.filter(function (n) {
|
||||
return n.name !== "Beijing";
|
||||
})
|
||||
.map(function (n) {
|
||||
return {
|
||||
startLat: 39.9,
|
||||
startLng: 116.4,
|
||||
endLat: n.lat,
|
||||
endLng: n.lng,
|
||||
};
|
||||
});
|
||||
|
||||
// three-globe 实例:使用大气层 + 节点 + 飞线 + 空心陆地多边形
|
||||
// three-globe 实例:仅使用空心陆地多边形(hollow globe 风格)
|
||||
var globe = new ThreeGlobe({
|
||||
waitForGlobeReady: true,
|
||||
animateIn: true,
|
||||
@@ -80,25 +55,7 @@
|
||||
.showAtmosphere(false)
|
||||
.atmosphereColor("#2b9fff")
|
||||
.atmosphereAltitude(0.18)
|
||||
.showGraticules(false)
|
||||
// 节点柱状体
|
||||
.pointsData(nodes)
|
||||
.pointColor(function () {
|
||||
return "#5ad8ff";
|
||||
})
|
||||
.pointAltitude(0.06)
|
||||
.pointRadius(0.32)
|
||||
.pointsTransitionDuration(1000)
|
||||
// 弧线
|
||||
.arcsData(arcs)
|
||||
.arcColor(function () {
|
||||
return ["#5ad8ff", "#ffffff"];
|
||||
})
|
||||
.arcAltitude(0.35)
|
||||
.arcStroke(0.45)
|
||||
.arcDashLength(0.6)
|
||||
.arcDashGap(0.25)
|
||||
.arcDashAnimateTime(2600);
|
||||
.showGraticules(false);
|
||||
|
||||
scene.add(globe);
|
||||
|
||||
@@ -172,34 +129,6 @@
|
||||
window.__globe = globe;
|
||||
}
|
||||
|
||||
// 星辰背景(简单加一点点空间感)
|
||||
var starGeometry = new THREE.BufferGeometry();
|
||||
var starCount = 600;
|
||||
var starPositions = new Float32Array(starCount * 3);
|
||||
for (var i = 0; i < starCount; i++) {
|
||||
var sr = 10 + Math.random() * 5;
|
||||
var theta = Math.random() * Math.PI * 2;
|
||||
var phi = Math.acos(2 * Math.random() - 1);
|
||||
var sx = sr * Math.sin(phi) * Math.cos(theta);
|
||||
var sy = sr * Math.sin(phi) * Math.sin(theta);
|
||||
var sz = sr * Math.cos(phi);
|
||||
starPositions[i * 3] = sx;
|
||||
starPositions[i * 3 + 1] = sy;
|
||||
starPositions[i * 3 + 2] = sz;
|
||||
}
|
||||
starGeometry.setAttribute(
|
||||
"position",
|
||||
new THREE.BufferAttribute(starPositions, 3)
|
||||
);
|
||||
var starMaterial = new THREE.PointsMaterial({
|
||||
color: 0x3f76ff,
|
||||
size: 0.08,
|
||||
transparent: true,
|
||||
opacity: 0.7,
|
||||
});
|
||||
var stars = new THREE.Points(starGeometry, starMaterial);
|
||||
scene.add(stars);
|
||||
|
||||
// 自适应窗口大小
|
||||
function onResize() {
|
||||
if (!container) return;
|
||||
@@ -226,8 +155,6 @@
|
||||
|
||||
// 地球自转
|
||||
globe.rotation.y += delta * 0.25;
|
||||
// 星空轻微旋转
|
||||
stars.rotation.y -= delta * 0.03;
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user