gnoc bot
aca661d17d
publish / build-and-publish (push) Successful in 4s
Posts, about, static/demos, and hugo.toml carried over from the old noc-hosted blog at famzheng.me. baseURL and gitea link rewritten to famzheng.com.
29 lines
1.7 KiB
Markdown
29 lines
1.7 KiB
Markdown
---
|
|
title: "把代码库变成 3D 空间"
|
|
date: 2026-04-10T22:00:00+01:00
|
|
draft: false
|
|
summary: "用 Three.js 做了个代码结构可视化，可以在浏览器里「走进」一个项目。"
|
|
---
|
|
|
|
写代码的时候经常想，项目结构在脑子里其实是有空间感的——哪些模块挨着，哪个文件最大，什么东西藏得最深。但 IDE 的文件树是扁平的，看不出这些。
|
|
|
|
所以试着做了个东西：把项目结构用 treemap 算法排布成 3D 方块，文件大小决定方块面积，目录层级对应高度。文件表面还渲染了（假的）代码，鼠标悬停能看到文件信息。
|
|
|
|
[在线体验 →](/demos/code-space-browser.html)
|
|
|
|
## 怎么做的
|
|
|
|
核心就三件事：
|
|
|
|
**Squarified Treemap** — 经典的矩形填充算法，把一组带权重的项目排成接近正方形的矩形。权重是文件行数的对数，这样大文件和小文件的差距不会太夸张。
|
|
|
|
**Three.js 渲染** — 每个文件是一个 box，顶面用 Canvas 2D 画出代码纹理（带行号和语法高亮）。目录是半透明平台，一层叠一层。灯光、雾效、边缘发光让整个场景有点赛博朋克的感觉。
|
|
|
|
**交互** — 鼠标拖拽旋转，滚轮缩放，右键平移。悬停显示文件信息。甚至留了 WebXR 接口——如果你有 VR 头显，可以直接走进去看。
|
|
|
|
## 一些感想
|
|
|
|
500 多行代码，一个 HTML 文件，不依赖任何构建工具。Three.js 从 CDN 加载，整个东西纯前端，打开就能跑。
|
|
|
|
这种项目最有意思的地方在于，它让你换一个视角去理解平时天天面对的东西。代码不只是文本，它是有结构、有层次、有「形状」的。
|