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

查看 46|回复 4
作者:xingwangchan   
[点我直接玩] https://www.radiosphere.live/
这玩意是干啥的?
一个 3D 交互式地球,上面每一个绿点都是一个真实在线的网络广播电台( Shoutcast / Icecast )。
你旋转/缩放地球,随便点一个点,就能听到那个地区的广播——可能是音乐、新闻、甚至是半夜的脱口秀。
技术栈
  • Three.js (r128) – 地球主体、标注点、光晕效果
  • Web Audio API – 音频流播放、音量控制、跨域处理
  • 自建数据层 – 爬取了全球约 8000+ 个公开电台,包含经纬度、流地址、国家等
  • 前端框架 – Vue + Vite
  • 坐标转换 – 地理坐标 (lat, lon) → 三维空间向量

    目前遇到的坑(也是我想在 V2EX 求助的重点)
    [ol]

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

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

  • 数据更新
    电台经常失效(流地址 404 或者超时),我是半手工检测 + 脚本定期跑。
    想知道有没有比较稳定的全球公开电台 API ?不想一直维护死链。
    [/ol]
    接下来想加的功能
  • 用户自定义导入电台(粘贴流地址,自动推算经纬度)
  • “随机漫游”模式:每 30 秒自动跳到另一个随机电台
  • 录音片段分享(录 15 秒存成 WebM 并生成分享链接)

    我需要你帮忙做的事
  • 戳一下网站,看看在你设备上卡不卡(手机 / 老笔记本尤其需要反馈)
  • 如果你知道 本地或小众地区的网络电台流地址,直接评论丢给我(国家 + 流地址),我批量加进去
  • 对上面那几个技术坑有思路的直接留言,跪谢 🙏

    最后说句心里话
    这个项目不是为了赚钱,纯粹想做点炫酷的东西。
    做出来之后自己每天都会随便点几个没听过的国家,感觉很奇妙。
    如果你也觉得有意思,欢迎转发给朋友;如果发现 bug 或者卡顿,直接喷,我改。
    ➡️ https://www.radiosphere.live/
    (网站目前没有广告,也没有用户系统,打开即用)
    可选的“沙发”自问自答

    :为什么不用 Cesium ?
    :Cesium 太重了,Three.js 更可控,而且我想保持打包后不到 2MB (不含纹理)。  


    :电台数据会不会涉及版权问题?
    :所有流地址都是电台自己公开的 Shoutcast 入口,我只是做了一个播放器外壳,类似浏览器。

    电台, 地球, 性能

  • wktline   
    AI 说:没法优化了-炸!
    burp2019   
    不用优化,让用户觉得炫的同时有点卡,凸显项目的难度和你的牛逼
    0754   
    好酷炫~~
    Tanf   
    不错不错
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部