---
title: "关掉博客的 3D 音乐可视化"
description: "一次用豆包把独立 3D 音乐可视化项目缝合进博客的尝试：技术栈、实际代价，以及为什么最终关掉页面、只保留轻量播放器。"
published: 2026-10-22T00:00:00.000Z
category: "实践笔记"
tags: ["博客","性能优化","Three.js"]
canonical: https://tblog.mmzhiku.xyz/posts/why-remove-3d-music-visualization/
---
import Chat from "@components/mdx/Chat.astro";

## 决定

::chat
:u{name="我"} 目前做了个音乐页面，特别炫酷好看，但是这是在博客上，前端的包也一直警告特别大。
:s 哈基墩思考了好久，最终放弃了思考
:a 那就删
:a 博客的核心是内容，炫酷特效属于加分项，如果它反复拖累维护成本、分散注意力，就不值得保留
:a 先在一个备份分支或独立分支里留下代码，导航和 sitemap 也一并移除，音乐播放器流一个轻量版就行，以后想复活随时都能拿回来喵
::

## 背景与技术栈

当时想测试豆包把一个独立的 3D 音乐可视化项目缝进博客的能力。

| 层次 | 技术 | 作用 |
| --- | --- | --- |
| 页面外壳 | Astro | 路由与静态构建 |
| 交互层 | Svelte 5 | 控制面板与播放器视图 |
| 3D 渲染 | Three.js / WebGL | 地形、相机和网格 |
| 音频分析 | Web Audio API | 读取频谱驱动动画 |
| 播放数据 | 全局音乐管理器 | 复用歌曲、进度和歌词 |

豆包完成了页面接入、组件拼装和视觉调校，效果符合预期。当时只验证了“能不能做出来”，没有评估接入后的维护成本、页面边界和对内容阅读的干扰，也没想到它会变成一条长期维护的支线。

## 为什么关掉

3D 页面是独立一级入口，和博客主要内容没有强关联。Three.js 场景、Web Audio 频谱、歌词同步和控制层需要一起维护，每次调整样式或交互都要重新验证整条可视化链路。它持续占用注意力和维护时间，却没有稳定产出内容价值。

## 删除与保留

删除独立 3D 页面及其专属可视化层，导航入口和 sitemap 中的 `/music/` 一并移除。全局音乐播放器保留：桌面悬浮组件与移动端 dock 共用播放引擎，支持 Meting API、本地曲目、播放列表和歌词，不再占用独立页面。

## 如何做一个这样的页面

删除的页面代码仍在 Git 历史里。想复刻时，把下面三句话依次交给 AI：

::chat
:a 先乖乖把源码下载下来喵
:a 然后指着那个目录跟 AI 说：本喵要做个 3D 可视化音乐页面，照着这份源码好好学，按本项目技术栈原样给我造一个，像素级复刻
:a 功能一个都不许少，超出范围的先跟本喵对齐确认再动手喵。这句丢过去，剩下就哗啦啦全做完了喵～
::

## 参考项目

删除前参考和对照过两个项目。反应堆是另一个 3D 音乐可视化实验，sonic-topography 是本站可视化页面参考过的实现。

::github{repo="wzk112/reactor-audio-visualizer"}
::github{repo="yin-yizhen/sonic-topography"}