友链图谱 2.0 - 3D 更美观的可视化

声明：本文在撰写过程中使用了 AI 工具辅助润色与排版。

前言

还记得我之前写的 友链图谱 - 汇聚千丝万缕的联系 吗？那时候还是 2D 平面的展示方式，虽然也能看出关系，但总觉得少了点什么。

这次我彻底重构了可视化引擎，从 2D 升级到 3D 球状网络！基于 Three.js 和 3d-force-graph，让整个友链网络在三维空间中旋转、缩放，视觉效果直接拉满。

友链图谱 2.0

友链图谱网址: https://links.needhelp.icu/

Github: https://github.com/xingwangzhe/FriendLinks

3D 球状网络

友链关系以 3D 球状网络 呈现，基于 Three.js 渲染：

聚焦与高亮效果

右键点击任意节点，会触发 聚焦效果：

从宏观宇宙中看，聚焦节点就像一颗 恒星，金色连线像光束一样指向它，非常醒目。

搜索与定位

URL 自动聚焦

如果你已经在网络中，可以通过查询参数来自动聚焦并高亮指定站点节点：

技术实现

3D 力导布局

flowchart TD
    A[links/*.yml 站点数据] --> B[解析节点与友链]
    B --> C[nodes: 站点 + 外部友链]
    B --> D[links: 互链 / 单向友链]
    C --> E[初始球面位置]
    E --> F[forceSimulation 3D]
    D --> F
    F --> G[forceLink 弹簧力]
    F --> H[forceManyBody 库仑斥力]
    F --> I[forceCenter 质心归零]
    F --> J{迭代 300 ticks}
    J --> K[alpha 冷却]
    J --> L[velocity 衰减]
    K --> M[更新位置]
    L --> M
    M --> J
    J --> N[输出 graph.json]

使用 d3-force-3d 在构建时预计算节点位置，客户端直接加载预计算好的坐标，开箱即用，无需等待布局收敛。

各步骤的数学细节：

研究本地仓库 src/pages/graph.json.ts 时发现：当前调用 forceSimulation(simNodes) 没有传入维度参数，d3-force-3d 默认是 2D 仿真。若要真正在三维空间计算 z 坐标，需要改为 forceSimulation(simNodes, 3)。

节点渲染

高亮系统

加入网络

和之前一样简单，fork 仓库，在 links 文件夹下用你的域名作为文件名创建 yml 文件：

1
site:
2
    name: 我的博客
3
    description: 分享编程和技术相关的文章
4
    url: https://example.com
5
    friends:
6
        - name: 编程小站
7
          url: https://codehub.example.com
8
        - name: 技术前沿
9
          url: https://techfrontier.example.com

写在最后

从 2D 到 3D，从平面到立体，友链图谱的升级不仅仅是视觉上的提升，更是对 Web 本意 的回归——让信息在空间中有机地连接在一起。

欢迎访问 友链图谱 2.0，找到你的博客在宇宙中的位置！