【亲测免费】 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>