【亲测免费】 3D力导向图组件教程【threejs】

2026-01-16 10:10:47作者：昌雅子Ethen

1. 项目介绍

3D Force-Directed Graph 是一个基于ThreeJS/WebGL的Web组件，用于在三维空间中以力导向布局展示图数据结构。该项目利用d3-force-3d或ngraph作为物理引擎，提供交互式的3D图形渲染效果。开发者可以选择自定义节点和链接样式，支持节点碰撞检测、动态数据变化以及多种视图控制方式。

2. 项目快速启动

安装依赖

确保已安装Node.js，然后通过npm安装3d-force-graph：

npm install 3d-force-graph

引入组件并初始化

在HTML文件中引入库文件，或者如果你已经通过npm安装，可以通过import语句引入：

<!-- 直接引入 -->
<script src="https://unpkg.com/3d-force-graph"></script>

<!-- 或者通过import引入 -->
<script>
  import { ForceGraph3D } from '3d-force-graph';
</script>

创建图表并设置数据：

// 创建图表实例
const graph3d = ForceGraph3D()(document.getElementById('3d_graph'));

// 设置数据
graph3d.graphData({
  nodes: [{ id: 'node1', ... }, ...],
  links: [{ source: 'node1', target: 'node2', ... }, ...]
});

运行示例

完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D Force Directed Graph Example</title>
  <style>
    #3d_graph {
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="3d_graph"></div>
  
  <script src="https://unpkg.com/3d-force-graph"></script>
  <script>
    const graph3d = ForceGraph3D()(document.getElementById('3d_graph'));
    
    // 示例数据
    const data = {
      nodes: [
        { id: 'node1', x: 0, y: 0, z: 0 },
        { id: 'node2', x: 1, y: 1, z: 1 },
        // 更多节点...
      ],
      links: [
        { source: 'node1', target: 'node2' },
        // 更多链接...
      ]
    };
    
    // 设置数据
    graph3d.graphData(data);
  </script>
</body>
</html>

将此代码保存为.html文件并在浏览器中打开即可查看3D力导向图。

3. 应用案例和最佳实践

基础示例：展示基本的3D图渲染。
异步加载：演示如何处理大型数据集的异步加载。
方向箭头：添加指向链接方向的箭头。
移动粒子：用动态粒子表示链接强度。
曲线线条：绘制带有弧度的连接线。
自定义颜色：自动根据数据属性给节点和链接上色。
文本节点：使用文本作为节点。
图像节点：用图像作为节点。
HTML节点：在节点内嵌入HTML元素。
定制节点几何：自定义节点形状和结构。

这些示例可以在项目GitHub页面上的“Examples”部分找到。

4. 典型生态项目

2D Canvas版本：对不支持WebGL的环境提供的替代方案。
VR版本：在虚拟现实中体验3D图。
AR版本（link）：将3D图集成到增强现实中。
React绑定：在React应用程序中方便地使用3D力导向图组件。

此外，该项目还支持其他框架和库的集成，如A-Frame的组件aframe-forcegraph-component。

3d-force-graph

3D force-directed graph component using ThreeJS/WebGL

项目地址：https://gitcode.com/gh_mirrors/3d/3d-force-graph

登录后查看全文