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 =() => {ForceGraph3D()(container.value) // 在给定的容器中创建一个 3D 力导向图
.graphData(gData.value); // 将数据 gData 设置为力导向图的图数据
}
</script>
<style scoped>
</style>
4. 调用接口的时候，后端返回数据只需要nodes[{id:0},{id:1}], links: [{source:{}, target:{}]---source:原物体，target:目标物体
补充：
ForceGraph3D()等方法及用法如下：
// 在节点处显示文本，只需填写 nodes数组中对象的某个想要显示文本的属性名即可
.nodeLabel('id')
// 通过groudId来分组不同的颜色
.nodeAutoColorBy('group')
// 设置线条的箭头长度
.linkDirectionalArrowLength(3.5)
// 用于设置线条箭头的相对位置
.linkDirectionalArrowRelPos(1)
// 用于设置线条的曲率
.linkCurvature(0.25)
// 启用或禁用线条箭头的粒子效果
.linkDirectionalParticles(true)
// 设置箭头粒子的速度为
.linkDirectionalParticleSpeed(0.005)
// 设置线条透明度
.linkOpacity(0.5)
// 根据连接属性自动为连接线条着色，（这里官方文档写的是d => gData.nodes[d.source].group ，需要自己根据数据微调）
.linkAutoColorBy( d=> gData.value.nodes[d.value].group )
.nodeAutoColorBy('group')
// 设置线条的箭头长度
.linkDirectionalArrowLength(3.5)
// 用于设置线条箭头的相对位置
.linkDirectionalArrowRelPos(1)
// 用于设置线条的曲率
.linkCurvature(0.25)
// 启用或禁用线条箭头的粒子效果
.linkDirectionalParticles(true)
// 设置箭头粒子的速度为
.linkDirectionalParticleSpeed(0.005)
// 设置线条透明度
.linkOpacity(0.5)
// 根据连接属性自动为连接线条着色，（这里官方文档写的是d => gData.nodes[d.source].group ，需要自己根据数据微调）
.linkAutoColorBy( d=> gData.value.nodes[d.value].group )
// 将节点转换成文字
.nodeThreeObject(node => {
const sprite = new SpriteText(node.id); // 将想要的文字传入 SpriteText
sprite.material.depthWrite = false; // false时 精灵对象将不会修改深度缓冲区的值，从而实现了精灵对象的透明背景
sprite.color = node.color; // 修改文字颜色
sprite.textHeight = 8; // 字体高度
return sprite; // 返回此对象时报错如下，还未解决
/*报错
* 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '#<Matrix4>')
TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '#<Matrix4>')
at Proxy.raycast (webpack-internal:///./node_modules/three/build/three.module.js:1677:2291)
at intersectObject (webpack-internal:///./node_modules/three/build/three.module.js:2755:674)
at Raycaster.intersectObjects (webpack-internal:///./node_modules/three/build/three.module.js:2755:410)
at HTMLCanvasElement.onPointerMove (webpack-internal:///./node_modules/three/examples/jsm/controls/DragControls.js:68:20)
* */
/*
const sprite = new SpriteText(node.id); // 将想要的文字传入 SpriteText
sprite.material.depthWrite = false; // false时 精灵对象将不会修改深度缓冲区的值，从而实现了精灵对象的透明背景
sprite.color = node.color; // 修改文字颜色
sprite.textHeight = 8; // 字体高度
return sprite; // 返回此对象时报错如下，还未解决
/*报错
* 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '#<Matrix4>')
TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Matrix4>' but got '#<Matrix4>')
at Proxy.raycast (webpack-internal:///./node_modules/three/build/three.module.js:1677:2291)
at intersectObject (webpack-internal:///./node_modules/three/build/three.module.js:2755:674)
at Raycaster.intersectObjects (webpack-internal:///./node_modules/three/build/three.module.js:2755:410)
at HTMLCanvasElement.onPointerMove (webpack-internal:///./node_modules/three/examples/jsm/controls/DragControls.js:68:20)
* */
/*
问题可能在于 SpriteText 对象的创建和返回时发生了错误。为了解决这个问题，您可以尝试以下几个步骤：
-
确保正确引入了
SpriteText对象所在的库。 -
检查
SpriteText对象的创建和配置。确保您在创建sprite对象时正确设置了属性，例如depthWrite、color和textHeight。另外，也可以尝试使用Object.defineProperty或Reflect.defineProperty来为sprite.material上的属性进行定义，以确保属性的可写性和可配置性。 -
检查使用
nodeThreeObject方法时代理对象的配置。确保正确配置了代理对象，并为modelViewMatrix属性设置了正确的特性标志。 -
检查代码中其他与代理对象和 Three.js 相关的部分。确保没有其他地方对
modelViewMatrix属性进行意外修改或干扰。
*/
})
.d3Force('charge').strength(-120) // 修改节点之间的电荷力强度为 -120
})
.d3Force('charge').strength(-120) // 修改节点之间的电荷力强度为 -120
