3D Force Graph 项目实战：使用图片作为3D力导向图中的节点

劳妍沛

于 2025-06-08 09:05:04 发布

阅读量358

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00931/article/details/148506109

3D Force Graph 项目实战：使用图片作为3D力导向图中的节点

3d-force-graph 3D force-directed graph component using ThreeJS/WebGL 项目地址: https://gitcode.com/gh_mirrors/3d/3d-force-graph

项目概述

3D Force Graph 是一个强大的三维力导向图可视化库，它能够将复杂的关系网络以直观的三维形式展现出来。本文将通过一个具体示例，展示如何使用图片作为3D力导向图中的节点，创建生动直观的数据可视化效果。

核心概念解析

1. 力导向图基础

力导向图是一种特殊的图形布局算法，它模拟物理系统中的力场（如电荷斥力、弹簧弹力等）来自动计算节点的位置。3D Force Graph 将这一概念扩展到三维空间，使数据关系更加立体直观。

2. 图片节点实现原理

传统力导向图通常使用简单的几何形状（如圆形、方形）作为节点。而本示例的创新之处在于使用图片作为节点，这需要以下技术实现：

使用Three.js的Sprite对象来显示图片
通过TextureLoader加载图片纹理
调整Sprite的材质和尺寸参数

代码实现详解

1. 数据准备

示例中创建了一个随机连接的图数据结构：

const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 
              'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 
              'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];

const gData = {
  nodes: imgs.map((img, id) => ({ id, img })),
  links: [...Array(imgs.length).keys()]
    .filter(id => id)
    .map(id => ({
      source: id,
      target: Math.round(Math.random() * (id-1))
    }))
};

这段代码做了以下几件事：

定义了一个包含11种动物图片的文件名数组
创建节点数组，每个节点包含id和对应的图片文件名
随机生成连接关系，确保每个节点(除了第一个)都连接到之前的一个随机节点

2. 图片节点渲染

核心的图片节点渲染逻辑如下：

.nodeThreeObject(({ img }) => {
  const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
  imgTexture.colorSpace = THREE.SRGBColorSpace;
  const material = new THREE.SpriteMaterial({ map: imgTexture });
  const sprite = new THREE.Sprite(material);
  sprite.scale.set(12, 12);
  return sprite;
})

关键点解析：