show html component on node click

[simpy25]

hello everyone, is there any chance to show html component above the node via onNodeClick? small example of how I planned it to implement

 <ForceGraph3D
                onNodeClick={(node, e) => onNodeClick(node, e)}
                onBackgroundClick={e=>hideTooltip(e)}
            />

    const onNodeClick = useCallback((node, e) => {

        const canvas; //PLANNED AS VARIABLE CANVAS ENTITY, BUT I DON'T KNOW HOW GET IT
        const element = document.createElement('div')
      
      inner.innerHTML = 'MESSAGE'

        const objectCSS = new CSS2DObject(el)
        objectCSS.position.set(0, 0, 0) //there would be clicked node coordinates

        canvas.add(objectCSS)
    }, []);

can anyone please advice how to get canvas entity to add html to, or there show be used some other approach? Thx in advance

[briggsyj]

@simpy25 I think you should be able to use graph2ScreenCoords to retrieve the screen space coordinates of the clicked node.

You'll need to configure a React Ref to get a reference to the force graph instance, then call graph2ScreenCoords() on it, passing it the clicked node's coordinates. You can then use the resulting coordinates to position html elements over the top of the canvas.

If you're specifically interested in drawing a HTML in 3D space, I don't think adding objectCSS ThreeJS objects directly to the canvas is the correct approach - you need to configure a new layer in the ThreeJS scene. https://threejs.org/examples/#css2d_label