vue3 安装 3d-force-graph

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 )

// 将节点转换成文字

.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)
* */
/*

问题可能在于 SpriteText 对象的创建和返回时发生了错误。为了解决这个问题，您可以尝试以下几个步骤：

1. 确保正确引入了 SpriteText 对象所在的库。

2. 检查 SpriteText 对象的创建和配置。确保您在创建 sprite 对象时正确设置了属性，例如 depthWrite、color 和 textHeight。另外，也可以尝试使用 Object.defineProperty 或 Reflect.defineProperty 来为 sprite.material 上的属性进行定义，以确保属性的可写性和可配置性。

3. 检查使用 nodeThreeObject 方法时代理对象的配置。确保正确配置了代理对象，并为 modelViewMatrix 属性设置了正确的特性标志。

4. 检查代码中其他与代理对象和 Three.js 相关的部分。确保没有其他地方对 modelViewMatrix 属性进行意外修改或干扰。

*/

// 解决方法
原数据形式： 

const showData：{nodes: [], links:[]}

改为: 
let showData = { nodes: [], links:[]}

})

// 目前只找到到了一种解决措施，后续有其他的再补充，希望各位朋友不吝赐教
.d3Force('charge').strength(-120) // 修改节点之间的电荷力强度为 -120