3d force graph和Three.js-向单个节点和节点组添加几何光晕/大气材质/简单纹理

我正在进行三维力图可视化，我正在使用great library：

我想尝试在力图的节点上获得某种发光效果，我正在研究类似的东西来实现它，但这是一个挑战：

到目前为止，我只能够添加新的形状和纹理。我还添加了跟随节点的文本精灵，因此我怀疑可能会有一种结合这两种元素的方法。请参见下面的代码

将辉光效果或纹理添加到此基本代码中也会非常有用：

身体{
保证金：0；
}

const loader=new THREE.TextureLoader（）；
常量图=ForceGraph3D（）
（document.getElementById（'3d-graph'））
.jsonUrl（“../datasets/testdata.json”）
.nodeLabel（'id'））
.backgroundColor（“#F7F8FA”）
.nodeAutoColorBy（‘组’）
.nodeThreeObjectExtend（true）
.nodeThreeObject（节点=>{
//使用文本精灵扩展链接
常量sprite=newspritetext（`${node.id}`）；
雪碧颜色='浅灰色'；
sprite.textHeight=4
sprite.fontFace=“漫画无MS”
精灵。位置。设定（5，5，5）
返回精灵；
})
.nodeVal（'size'））
.linkWidth（2）
常数距离=600；
//
常数比色法=新的三倍比色法（18）；
const sphereMaterial=新的3.MeshBasicMaterial({
map:loader.load（“../datasets/texture.jpg”）
});
常数网格=新的三个网格（球墨法、球体材料）；
网格。位置。设置（9，17，22）；
Graph.scene（）.add（网格）；
//
//摄像机轨道
设角度=0；
设置间隔（（）=>{
照相定位({
x：距离*数学sin（角度），
z：距离*数学cos（角度）
});
角度+=数学PI/1000；
}, 10); //
设materialArray=[]；
让texture_ft=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_ft.jpg'）；
让texture_bk=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_bk.jpg'）；
让texture_up=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_up.jpg'）；
让texture_dn=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_dn.jpg'）；
让texture_rt=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_rt.jpg'）；
让texture_lf=new THREE.TextureLoader（）.load（'../datasets/penguins/kenon_star_lf.jpg'）；
材料排列。推动（新的三网格基本材料({
贴图：纹理
}));
材料排列。推动（新的三网格基本材料({
贴图：纹理
}));
材料排列。推动（新的三网格基本材料({
贴图：纹理向上
}));
材料排列。推动（新的三网格基本材料({
贴图：纹理
}));
材料排列。推动（新的三网格基本材料({
贴图：纹理
}));
材料排列。推动（新的三网格基本材料({
贴图：纹理
}));
for（设i=0；i<6；i++）
材料排列[i]。侧面=三。背面；
让skyboxGeo=new THREE.BoxGeometry（10000,10000,10000）；
让skybox=new THREE.Mesh（skyboxGeo，materialArray）；
Graph.scene（）.add（skybox）；
/*loader.load（'https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg，函数（纹理）{
scene.background=纹理；
});
*/

---

谢谢

我也很有兴趣让它发挥作用

我用了这个，发现这两条线是必要的：

var glowMesh    = new THREEx.GeometricGlowMesh(mesh)
mesh.add(glowMesh.object3d)

对于自定义节点几何图形，将其与此结合使用

整个基本工作流程如下所示：

//随机树数据
var generateData=函数（）{
常数N=50；
常数gData={
节点：[…数组（N）.keys（）].map（i=>（{id:i}）），
链接：[…数组（N）.keys（）]
.filter（id=>id）
.map（id=>({
资料来源：id，
目标：Math.round（Math.random（）*（id-1））
}))
};
返回gData；
}
//创建一个three.js球体网格。
var sphereMesh=函数（id）{
var mesh=新的3.mesh(
[
新三.球墨法（10,32,32）
][id%1]，
新的三点网格材料({
颜色：“#277ec9”，
透明：是的，
不透明度：1.0
})
)
//让它发光。
var glowMesh=新的三倍几何体网格（网格）；
添加（glowMesh.object3d）；
var insideUniforms=glowMesh.insideMesh.material.uniforms；
insideUniforms.glowColor.value.set（'yellow'）；
var outsideUniforms=glowMesh.outsideMesh.material.uniforms；
outsideUniforms.glowColor.value.set（'yellow'）；
回流网
}
常量图=ForceGraph3D（）
（document.getElementById（'3d-graph'））
.graphData（generateData（））
.nodeThreeObject（（{id}）=>sphereMesh（id））
.nodeLabel（'id'）；
/*
以下三段代码是THREEx库所需的最少代码。
*/
//==========threex.geometry.js=============
/**
*@名称空间
*/
var THREEx=THREEx | |{}
/**
*放大一个几何体
*@param{THREE.Geometry}要展开的几何体
*@param{Number}长度百分比要展开，请使用负值进行侵蚀
*/
三倍几何=函数（几何，长度）{
//从geometry.faces收集顶点法线
var vertexNormals=新数组（geometry.vertex.length）；
几何.面.forEach（函数（面）{
如果（面实例为3.Face4）{
顶点法线[face.a]=面.顶点法线[0]；
顶点法线[face.b]=面.vertexNormals[1]；
顶点法线[face.c]=face.vertexNormals[2]；
顶点法线[face.d]=面.vertexNormals[3]；
}else if（面实例为3.Face3）{
顶点法线[face.a]=面.顶点法线[0]；
顶点法线[face.b]=面.vertexNormals[1]；
顶点法线[face.c]=face.vertexNormals[2]；
}否则
<script>
    const loader = new THREE.TextureLoader();

    const Graph = ForceGraph3D()
        (document.getElementById('3d-graph'))
        .jsonUrl('../datasets/testdata.json')
        .nodeLabel('id')
        .backgroundColor('#F7F8FA')
        .nodeAutoColorBy('group')
        .nodeThreeObjectExtend(true)
        .nodeThreeObject(node => {
            // extend link with text sprite
            const sprite = new SpriteText(`${node.id}`);
            sprite.color = 'lightgrey';
            sprite.textHeight = 4
            sprite.fontFace = "Comic Sans MS"
            sprite.position.set(5, 5, 5)
            return sprite;

        })
        .nodeVal('size')
        .linkWidth(2)


    const distance = 600;



    //
    const sphereGeometry = new THREE.SphereGeometry(18);
    const sphereMaterial = new THREE.MeshBasicMaterial({
        map: loader.load('../datasets/texture.jpg')
    });
    const mesh = new THREE.Mesh(sphereGeometry, sphereMaterial);
    mesh.position.set(9, 17, 22);
    Graph.scene().add(mesh);
    //


    // camera orbit
    let angle = 0;
    setInterval(() => {
        Graph.cameraPosition({
            x: distance * Math.sin(angle),
            z: distance * Math.cos(angle)
        });
        angle += Math.PI / 1000;

    }, 10); //


    let materialArray = [];
    let texture_ft = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_ft.jpg');
    let texture_bk = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_bk.jpg');
    let texture_up = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_up.jpg');
    let texture_dn = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_dn.jpg');
    let texture_rt = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_rt.jpg');
    let texture_lf = new THREE.TextureLoader().load('../datasets/penguins/kenon_star_lf.jpg');

    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_ft
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_bk
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_up
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_dn
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_rt
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_lf
    }));

    for (let i = 0; i < 6; i++)
        materialArray[i].side = THREE.BackSide;
    let skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
    let skybox = new THREE.Mesh(skyboxGeo, materialArray);
    Graph.scene().add(skybox);

    /* loader.load('https://images.pexels.com/photos/1205301/pexels-photo-1205301.jpeg', function(texture) {
         scene.background = texture;
     });
     */

</script>

var glowMesh    = new THREEx.GeometricGlowMesh(mesh)
mesh.add(glowMesh.object3d)