3d-force-graph力导向图中向节点添加obj模型

前言

在3d可视化中，人们经常需要在节点中添加3D模型以增强节点的可视化效果。而3d-force-graph是一款流行的JavaScript库，可以用于创建基于力学系统的3D图形，并且它也支持向节点中添加3D模型。

在本文中，我们将演示如何使用3d-force-graph向节点中添加obj模型。

实现效果

实现步骤

加载OBJ模型

首先，我们需要编写一个函数来加载OBJ模型。这个函数将使用three.js中的OBJLoader来加载模型。

const obj = new THREE.Object3D();
const objLoader = new THREE.OBJLoader();
objLoader.load(node.objectUrl, function (object) {
	//设置模型缩放比例
	object.scale.set(0.1, 0.1, 0.1);
	obj.add(object);
});

添加节点数据

接下来，我们需要创建一个包含节点数据的JSON对象。每个节点对象都应该包含一个唯一的id以及一个指向其OBJ模型文件的url。例如：

        const graphData = {
            nodes: [
                { id: 'node1', objectUrl: 'http://127.0.0.1:5500/02.obj' },