✨feature: Optimize the Earth interaction experience (#46)

1. Optimize the material of the sphere to be more realistic

2. Use the `d3 geo` library to calculate the coordinate distance and optimize the height of the Bezier curve, making it more in line with the surface of the sphere

Co-authored-by: 杨乾 <king473378347@gmail.com>

Author: Superhero-king

web/package.json

@@ -38,6 +38,7 @@
         "axios": "^1.8.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "d3-geo": "^3.1.1",
         "date-fns": "^3.6.0",
         "echarts": "^5.6.0",
         "i18next": "^24.2.2",
@@ -57,13 +58,14 @@
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "three": "^0.176.0",
-        "three-globe": "^2.42.4",
+        "three-globe": "^2.42.8",
         "zod": "^3.24.1",
         "zustand": "^5.0.3"
     },
     "devDependencies": {
         "@eslint/js": "^9.17.0",
         "@tanstack/react-query-devtools": "^5.69.0",
+        "@types/d3-geo": "^3.1.0",
         "@types/node": "^22.10.7",
         "@types/node-forge": "^1.3.11",
         "@types/react": "^18.3.18",

web/pnpm-lock.yaml

@@ -12,6 +12,7 @@ import { Button } from '@/components/ui/button'
 import { OverviewStats } from '@/types/stats'
 import { AttackEventAggregateResult } from '@/types/log'
 import { useDebounce } from '@/hooks/useDebounce'
+import { geoDistance } from 'd3-geo';
 
 /**
  * 安全大屏布局组件
@@ -145,7 +146,8 @@ export const SecurityDashboardLayout: React.FC = () => {
                 startLng: event.srcIpInfo.location.longitude,
                 endLat: 30.274084, // 杭州坐标
                 endLng: 120.155070,
-                arcAlt: Math.min(0.3, Math.max(0.05, event.count / 500)),
+                // arcAlt: Math.min(0.3, Math.max(0.05, event.count / 500)),
+                arcAlt: geoDistance([event.srcIpInfo.location.longitude, event.srcIpInfo.location.latitude], [120.155070, 30.274084]), // 计算起点和终点之间的地理距离(线条需要根据距离生成相应的贝塞尔曲线高度)
                 colorIndex: Math.abs(event.srcIp.split('.').reduce((a, b) => a + parseInt(b), 0)) % 8 // 基于IP地址生成固定颜色索引
             }))
 

web/src/feature/security-dashboard/component/SecurityDashboardLayout.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from "react"
-import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, Color, MeshStandardMaterial, FrontSide, PointLight } from "three"
+import { WebGLRenderer, PerspectiveCamera, Scene, AmbientLight, DirectionalLight, Color, PointLight, MeshPhysicalMaterial, DoubleSide } from "three"
 import { OrbitControls } from "three/addons/controls/OrbitControls.js"
 import ThreeGlobe from "three-globe"
 import countries from "./globe-data-min.json"
@@ -138,7 +138,7 @@ const Globe3DMap = React.memo(({ wafAttackTrajectoryData }: { wafAttackTrajector
             // 创建新的Three.js实例
             const renderer = new WebGLRenderer({
                 antialias: true,
-                logarithmicDepthBuffer: false,
+                logarithmicDepthBuffer: true,
                 alpha: true,
                 preserveDrawingBuffer: true  // 保持绘制缓冲区
             })
@@ -189,19 +189,25 @@ const Globe3DMap = React.memo(({ wafAttackTrajectoryData }: { wafAttackTrajector
             const globe = new ThreeGlobe({ waitForGlobeReady: true, animateIn: true })
             scene.add(globe)
 
-            const globeMaterial = new MeshStandardMaterial({
-                color: new Color(0xa071da),
-                metalness: 1,
-                roughness: 0.75,
-                side: FrontSide,
-                depthWrite: false  // 保持原有设置
+            const globeMaterial = new MeshPhysicalMaterial({
+                color: new Color(0x0d0c27),
+                transparent: true,       // 启用透明
+                transmission: 1,         // 透光率
+                thickness: 0.5,          // 厚度
+                roughness: 0.75,         // 粗糙度
+                metalness: 0,            // 金属感
+                ior: 1.5,                // 折射率
+                envMapIntensity: 1.5,    // 环境贴图强度
+                reflectivity: 0.1,       // 反射率
+                opacity: 0.55,           // 不透明度
+                side: DoubleSide,        // 双面渲染
             })
 
             globe
                 .showGlobe(true)
                 .globeMaterial(globeMaterial)
                 .showAtmosphere(true)
-                .atmosphereColor("#a071da")
+                .atmosphereColor("#0d0c27")
                 .atmosphereAltitude(0.25)
 
             globe
@@ -211,7 +217,7 @@ const Globe3DMap = React.memo(({ wafAttackTrajectoryData }: { wafAttackTrajector
                 .hexPolygonMargin(0.4)
                 .hexPolygonColor((e) => {
                     const countryCode = (e as FeatureCollection<Geometry, GeoJsonProperties>["features"][number]).properties!.ISO_A3
-                    return (countryCode === "CHN" || countryCode === "TWN") ? "rgba(255, 255, 255, 1)" : "rgba(241, 230, 255, 0.87)"
+                    return (countryCode === "CHN" || countryCode === "TWN") ? "rgba(255, 255, 255, 1)" : "rgba(241, 230, 255, 1)"
                 })
 
             // 设置 onGlobeReady 回调（只设置一次）
@@ -354,7 +360,7 @@ const Globe3DMap = React.memo(({ wafAttackTrajectoryData }: { wafAttackTrajector
                 // 根据攻击类型分配颜色
                 return WAF_ATTACK_TRAJECTORY_COLORS[attackTrajectory.colorIndex]
             })
-            .arcAltitude((e: unknown) => (e as WAFAttackTrajectory).arcAlt)
+            .arcAltitude((e: unknown) => Math.pow((e as WAFAttackTrajectory).arcAlt * 0.22, 1.225)) // 攻击轨迹高度(因为此处的arcAlt是地理距离, 所以需要适配四次贝塞尔曲线的高度, 距离越远需要给的补偿值越大因此使用倍率加次方计算)
             .arcStroke(0.3) // 攻击轨迹线条粗细
             .arcDashLength(0.9)
             .arcDashGap(4)