1.首先创建vue3的项目

(资料图片仅供参考)

2.创建好后通过开发工具打开项目并打开命令行，输入指令 npm install3d-force-graph 安装即可

3.在使用的页面中引入3d-force-graph

<script setup>import {onMounted, ref} from "vue";// 引入3d-force-graphimport 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>

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 )// 将节点转换成文字 .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 "#" but got "#")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 "#" but got "#") 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

标签：