1.首先创建vue3的项目
2.创建好后通过开发工具打开项目并打开命令行，输入指令 npm install 3d-force-graph 安装即可
3.在使用的页面中引入 3d-force-graph
<!--官网的 basic案例-->
<template>
<!-- ref 用于在组件中引用当前的 DOM 元素。-->
<div ref="container"></div></template>
<script setup>
import {onMounted, ref} from "vue";
// 引入3d-force-graph
import ForceGraph3D from "3d-force-graph";const container = ref(null) // 作用是创建一个响应式的引用对象，并将其初始值设置为 null。
const N = ref(300)
const gData = ref({
nodes: [...Array(N).keys()].map(i => ({ id: i })),
links: [...Array(N).keys()]
.filter(id => id)
.map(id => ({
source: id,
target: Math.round(Math.random() * (id-1))
}))
})
onMounted(()=> {
loadGrapg()
})
// 渲染页面
const loadGrapg =() => {const graph = ForceGraph3D()(container.value); // 在给定的容器中创建一个 3D 力导向图
graph.graphData(gData.value); // 将数据 gData 设置为力导向图的图数据
}
</script>
<style scoped>
</style>
4. 调用接口的时候，后端返回数据只需要nodes[{id:0},{id:1}], links: [{source:{}, target:{}]---source:原物体，target:目标物体