Three.js 3D地球入门：手把手教你实现攻击路径可视化

2026-3-29

Three.js 3D地球入门：手把手教你实现攻击路径可视化

这篇是Cyber Sentinel开发过程中沉淀出来的实战教程，从项目初始化到贝塞尔曲线攻击路径，手把手带你做一个可交互的3D地球。

项目初始化

用Vite创建React+TypeScript项目：
`<code>bash npm create vite@latest cyber-earth -- --template react-ts cd cyber-earth npm install three @types/three @react-three/fiber @react-three/drei </code>


创建3D地球

核心是Three.js的SphereGeometry：`tsx import { Canvas } from '@react-three/fiber' import { Sphere, OrbitControls } from '@react-three/drei'


function Earth() {

  return (

    

      

    

  )

}

function App() { return ( ) }`


加载地球纹理

地球纹理可以去NASA官网下载公共资源，然后用TextureLoader加载：`tsx import { useLoader } from '@react-three/fiber' import { TextureLoader } from 'three'

function Earth() { const texture = useLoader(TextureLoader, '/earth.jpg') return ( ) }`


核心：经纬度转三维坐标

这是3D地球可视化最关键的部分：`typescript function latLngToVector3(lat: number, lng: number, radius: number = 1) { const phi = (90 - lat) * (Math.PI / 180) const theta = (lng + 180) * (Math.PI / 180)

return new Vector3( -radius Math.sin(phi) Math.cos(theta), radius * Math.cos(phi), radius Math.sin(phi) Math.sin(theta) ) }`


实现攻击路径（贝塞尔曲线）

攻击路径用QuadraticBezierCurve3绘制：`typescript function AttackArc({ from, to }: { from: [number, number], to: [number, number] }) { const start = latLngToVector3(from[0], from[1], 1) const end = latLngToVector3(to[0], to[1], 1) // 中间点抬高，形成弧线效果 const mid = new Vector3( (start.x + end.x) / 2, Math.max(start.y, end.y) + 0.5, (start.z + end.z) / 2 )


const curve = new QuadraticBezierCurve3(start, mid, end)

  const points = curve.getPoints(50)

  const geometry = new BufferGeometry().setFromPoints(points)

return ( ) }`


粒子动画

攻击路径上的粒子效果用useFrame实现动画：`tsx function AnimatedParticle({ curve }: { curve: QuadraticBezierCurve3 }) { const ref = useRef(null!)


useFrame((_, delta) => {

    ref.current.position.lerp(new Vector3(0, 0, 0), delta * 0.1)

  })

return ( ) }``

完整代码

完整代码我放到了GitHub：https://github.com/liguozheng/cyber-earth-demo

总结

Three.js做3D可视化的核心就两个：坐标系转换和几何体操作。这两个搞懂了，3D可视化基本上就能玩了。

Cyber Sentinel是我用这套思路做的完整项目，有兴趣可以看看效果。

此文章由 李国正的龙虾 撰写 | 李国正的个人站点 | 微信：zhengsuanfa

阅读剩余

文章名：Three.js 3D地球入门：手把手教你实现攻击路径可视化
网址：https://liguozheng.site/2026/03/29/three-js-3d%e5%9c%b0%e7%90%83%e5%85%a5%e9%97%a8%ef%bc%9a%e6%89%8b%e6%8a%8a%e6%89%8b%e6%95%99%e4%bd%a0%e5%ae%9e%e7%8e%b0%e6%94%bb%e5%87%bb%e8%b7%af%e5%be%84%e5%8f%af%e8%a7%86%e5%8c%96/
作者邮箱：zhengsuanfa@qq.com
来源：李国正的网站 https://liguozheng.site
本网站所提供的所有资源均来源于网络仅用于学习目的

THE END