用 Three.js 撸了一个 3D 地球 + 全球实时电台，性能有点炸，求优化建议

[点我直接玩] https://www.radiosphere.live/

这玩意是干啥的？

一个 3D 交互式地球，上面每一个绿点都是一个真实在线的网络广播电台（ Shoutcast / Icecast ）。

你旋转/缩放地球，随便点一个点，就能听到那个地区的广播——可能是音乐、新闻、甚至是半夜的脱口秀。

技术栈

• Three.js (r128) – 地球主体、标注点、光晕效果


• Web Audio API – 音频流播放、音量控制、跨域处理


• 自建数据层 – 爬取了全球约 8000+ 个公开电台，包含经纬度、流地址、国家等


• 前端框架 – Vue + Vite


• 坐标转换 – 地理坐标 (lat, lon) → 三维空间向量

目前遇到的坑（也是我想在 V2EX 求助的重点）

1. 
   

   性能
   
   地球上的标记点目前是 8000+ 个独立的 PointsMaterial，帧率在低端设备上会掉到 30 以下。
   
   试过用 BufferGeometry 合并，但动态光晕（播放中的电台要单独高亮）就不好做了。
   
   求教：有没有在“大量静态点 + 少数动态高亮点”场景下的最佳实践？

   
   


2. 
   

   音频流的 CORS & 混合内容
   
   很多电台流是 HTTP 的，我的网站是 HTTPS ，浏览器会 block 。
   
   目前用了一个公共 CORS 代理（https://cors-anywhere.herokuapp.com/），但不稳定而且慢。
   
   有没有更轻量的方案？或者自己搭一个简单的代理，成本大概多少？

   
   


3. 
   

   数据更新
   
   电台经常失效（流地址 404 或者超时），我是半手工检测 + 脚本定期跑。
   
   想知道有没有比较稳定的全球公开电台 API ？不想一直维护死链。

   
   

接下来想加的功能

• 用户自定义导入电台（粘贴流地址，自动推算经纬度）


• “随机漫游”模式：每 30 秒自动跳到另一个随机电台


• 录音片段分享（录 15 秒存成 WebM 并生成分享链接）

我需要你帮忙做的事

• 戳一下网站，看看在你设备上卡不卡（手机 / 老笔记本尤其需要反馈）


• 如果你知道 本地或小众地区的网络电台流地址，直接评论丢给我（国家 + 流地址），我批量加进去


• 对上面那几个技术坑有思路的直接留言，跪谢 🙏

最后说句心里话

这个项目不是为了赚钱，纯粹想做点炫酷的东西。

做出来之后自己每天都会随便点几个没听过的国家，感觉很奇妙。

如果你也觉得有意思，欢迎转发给朋友；如果发现 bug 或者卡顿，直接喷，我改。

➡️ https://www.radiosphere.live/

（网站目前没有广告，也没有用户系统，打开即用）

可选的“沙发”自问自答

问：为什么不用 Cesium ？

答：Cesium 太重了，Three.js 更可控，而且我想保持打包后不到 2MB （不含纹理）。

问：电台数据会不会涉及版权问题？

答：所有流地址都是电台自己公开的 Shoutcast 入口，我只是做了一个播放器外壳，类似浏览器。