vue3+3d-force-graph+three-spritetext

Question

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",

报错：(页面加载出来是没有问题的，鼠标移动到页面上就报这个错，很是困扰啊，刚开始接触，实在想不明白哪里出问题了)

Answer 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>