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

发布时间：2026-06-27 18:30:00更新时间：2026-06-27 18:30:00

🕒 阅读时间：5 分钟📝 字数：1217👀 阅读量：Loading...

声明：本文在撰写过程中使用了 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 力导布局

links/*.yml 站点数据解析节点与友链nodes: 站点 + 外部友链links: 互链 / 单向友链初始球面位置forceSimulation 3DforceLink 弹簧力forceManyBody 库仑斥力forceCenter 质心归零迭代 300 ticksalpha 冷却velocity 衰减更新位置输出 graph.json

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

各步骤的数学细节：

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

节点渲染

高亮系统

加入网络

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

site:
    name: 我的博客
    description: 分享编程和技术相关的文章
    url: https://example.com
    friends:
        - name: 编程小站
          url: https://codehub.example.com
        - name: 技术前沿
          url: https://techfrontier.example.com

写在最后

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

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

Creative Commons