Add CSS2DObject always above the other object

Questions
1

Hello everyone, I’m trying to add a popup with some text above the graph node on node click.
image
node variable there is basically entity with x,y,z coordinates. But these coordinates are static and do not changing depending on graph rotation or zoom

    const showTooltip = (node) => {
        const el = document.createElement('div')
        el.className = 'graph-tooltip'
        el.innerHTML = `<div class="graph-tooltip__content">${node.textDescription || ''}</div>`
        const objectCSS = new CSS2DObject(el)
        objectCSS.position.set(node.x, node.y + 20, node.z)
        objectCSS.name = 'tooltip';
        Graph.scene().add(objectCSS);
    }

the problem is when I’m rotating or zooming graph popup position is broken
image
(rotating)
image
(zooming)

2

Hi!
Maybe this topic will be helpful: Globe with markers and label: thoughts, ideas, approaches, solutions

3

imo css2d/3d is questionable. it is awkward to use, it can’t hide behind geometry and the html will never be part of your scene, to position it especially for models is hard.

but stuff like this is so easy in the react eco system for threejs, especially since you parent it directly to your meshes and it will just follow along. could this be a way forward?

const [clicked, click] = useState(false)
...
<mesh onClick={() => click(!clicked)} onPointerMissed={() => click(false)}>
  ...
  {clicked && <Html>....
1 Like
4

thx for your responses and sandbox examples. I’ve played a little bit with positions and camera zoom and made kinda a working solution. Code sandboxes were helpful to understand how things are supposed to work in general