一个 Web 组件，使用强制导向的迭代布局来表示 3 维空间中的图形数据结构。使用ThreeJS /WebGL 进行 3D 渲染，使用d3-force-3d或ngraph作为底层物理引擎。

相关参阅2D 画布版、VR 版和AR 版、React 绑定。

Githup:https://github.com/vasturiano/3d-force-graph

3d-force-graph

语言

语言

开始使用

安装 npm install 3d-force-graph
import ForceGraph3D from '3d-force-graph';
//或者 const ForceGraph3D = require('3d-force-graph');

或者

<script src="//unpkg.com/3d-force-graph"></script>

代码内使用

const myGraph = ForceGraph3D();
myGraph(<myDOMElement>)
  .graphData(<myData>);

//<myDOMElement>视图容器html元素
//<myData>数据格式

主要内容结构

结构图

一、数据格式

数据格式

{
    "nodes": [
        {
          "id": "id1",
          "name": "李明",
          "val": 1
        },
        {
          "id": "id2",
          "name": "王紫",
          "val": 10
        },
        ...
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        ...
    ]
}

二、节点样式

三、链接样式

四、相关配置

1.初始化配置

ForceGraph3d({ configOptions })(<domElement>)

2.容器布局

五、其他拓展

1.引入外部模型

  <script src="./GLTFLoader.js"></script>

// 引入外部模型 <-- star -->
    const loader = new THREE.GLTFLoader().setPath( './' );
    loader.load( 'gltf/gift.gltf', function ( gltf ) {
      gltf.scene.scale.set( 10.0, 10.0, 10.0 );
      console.log("gltf",gltf);
      //添加材质
      gltf.scene.children[0].material = new THREE.MeshLambertMaterial({
              color: Math.round(Math.random() * Math.pow(2, 24)),//材质颜色
        })
      scene.add( gltf.scene );//添加到场景
    } );
    // 引入外部模型 <-- end --> 

2.加入天空盒子

// 引入天空盒子 <-- star -->
   var path = '/sky/'
    var format = '.jpg'
    var urls = [
      path + 'px' + format, path + 'nx' + format,
      path + 'py' + format, path + 'ny' + format,
      path + 'pz' + format, path + 'nz' + format
    ]
    var materials = []
    for (var i = 0; i < urls.length; ++i) {
      var loader = new THREE.TextureLoader()
      // loader.setCrossOrigin( this.crossOrigin );
      var texture = loader.load(urls[i], function () {}, undefined, function () {})
      materials.push(new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.BackSide
        // transparent: true,
        // needsUpdate:true
      })
      )
    }
    var cube = new THREE.Mesh(new THREE.BoxGeometry(9000, 9000, 9000), materials)
    cube.name = 'sky'
    scene.add(cube)
 // 引入天空盒子 <-- end -->

附：官方案例

• 基本（来源）
• 异步加载（来源）
• 更大的图（~4k 元素）（来源）
• 方向箭头（来源）
• 定向运动粒子（源）
• 曲线和自链接（来源）
• 自动着色节点/链接（来源）
• 文本作为节点（来源）
• 图像作为节点（来源）
• 节点中的 HTML（源）
• 自定义节点几何图形（来源）
• 渐变链接（来源）
• 链接中的文字（来源）
• 轨道控制（来源）
• 飞行控制（来源）
• 相机自动绕轨（来源）
• 点击关注节点（源码）
• 单击以展开/折叠节点（源）
• 拖动后修复节点（来源）
• 使图形适合画布（来源）
• 突出显示节点/链接（来源）
• 多节点选择（来源）
• 动态数据变化（来源）
• 节点碰撞检测（来源）
• 操纵连杆力距离（来源）
• 按需发射链接粒子（来源）
• 力导向树（DAG 模式）（来源）
• yarn.lock 依赖图（DAG 模式）（来源）
• 将外部对象添加到场景（源）
• Bloom后处理效果（来源）
• 暂停/恢复动画（来源）