vue3+3d-force-graph+three-spritetext在做官方案例text-nodes时遇到了问题请对3d-force-graph有了解的朋友们答疑解惑,感谢感谢
此页面的全部代码
<template>
<div ref="container"></div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ForceGraph3D from "3d-force-graph";
import SpriteText from "three-spritetext";
const container = ref(null)
const gData = ref({
nodes: [
{"id": "Myriel", "group": 1},
{"id": "Napoleon", "group": 1}
],
links: [
{"source": "Napoleon", "target": "Myriel", "value": 1},
{"source": "Mlle.Baptistine", "target": "Myriel", "value": 8}
]
}
)
onMounted(() => {
loadView()
})
const loadView = () => {
ForceGraph3D()(container.value)
.graphData(gData.value)
.nodeThreeObject(node => {
const sprite = new SpriteText(node.id);
return sprite;
}
</script>
<style scoped>
</style>
依赖:
"3d-force-graph": "1.71.5",
"three-spritetext": "1.8.1",
报错:(页面加载出来是没有问题的,鼠标移动到页面上就报这个错,很是困扰啊,刚开始接触,实在想不明白哪里出问题了)
你代码少了一个大括号在nodeThreeObject这里
<template>
<div ref="container"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import ForceGraph3D from '3d-force-graph';
import SpriteText from 'three-spritetext';
const container = ref(null);
const gData = ref({
nodes: [
{ id: 'Myriel', group: 1 },
{ id: 'Napoleon', group: 1 },
],
links: [
{ source: 'Napoleon', target: 'Myriel', value: 1 },
{ source: 'Mlle.Baptistine', target: 'Myriel', value: 8 },
],
});
onMounted(() => {
loadView();
});
const loadView = () => {
ForceGraph3D()(container.value)
.graphData(gData.value)
.nodeThreeObject((node) => {
const sprite = new SpriteText(node.id);
return sprite;
});
};
</script>
<style scoped>
/* 可选的样式 */
</style>