3D图

一：安装依赖插件
1.安装3d-force-graph

npm i 3d-force-graph

2.安装three.js

npm i three

3.文本节点需要安装spriteText(可选)

npm i three-spritetext

二：3d-force-graph 按官方demo写在自己项目里
gitHub地址：https://github.com/vasturiano/3d-force-graph
可根据自己需要找到需要的demo文件，画出基本的3d模型；
**Note:
1.图片node：有一点需要注意，图片节点的时的图片demo用的不行，要用require引入，下面会有对比图

2.文本node实现有两种办法：
（1）.精灵spriteText (没试出来，不知道好不好使反正)
（2）.canavas 2d
3.图片node和文本node不可兼容啊，因为图片node随机生成位置之后（数据源肯定是变化的，不可能写死），文本设置位置时无法捕捉到图片的位置，设成固定值的话这个工作量也是毫无可行性----亲测。如果哪位小伙伴实现了二者兼容的办法，一定要艾特我联系我，感谢！**

三.demo写好了，接下来就是对后台对接数据了
1.数据结构最好有id和childrenId,减少前端工作量
2.格式如下：

needData:{
    nodes:  = [
    {  
      id：item.id,
      img:item/img,
      name:item.name,
      yjzt:item.yjzt,(这是一个预警状态字段)，区分二三级显示不同的图标
    }
    ]，
    links: [
    {
      source:id,  // 源----父级
      target:childrenId(循环取值，数组格式)// 目标----子级
    }
    ]
}