How to click html element inside mesh

Questions
, , , ,
1

Hi folks,

I’ve a 360 image which I’m plotting inside sphere and in that mesh I’m rendering css2DObject using css2DRenderer and I’m using Raycaster to get the array of objects, but Raycaster is not detecting my css2DObject and I’m trying to addEventListener on the div but it is not getting triggered.

here is my code:

 const p1 = document.createElement("p");
    p1.className = "tooltip";
    p1.textContent = data[0].links[1].value;
    const div1 = document.createElement("div");
    div1.appendChild(p1);
   // this is not working.
    div1.addEventListener("click", (event) => {
      console.log("clicked!");
    });
    const cPointLabel1 = new CSS2DObject(div1);
2

make sure that the css is in front of the canvas element and can receive events. for this to work both the canvas and the html overlay are both position:absolute and usually share a parent, this is from where the canvas should fetch events from.

and yes, you would use dom events, not raycasting.

3

The issue was, in CSSRenderer I was setting

labelRenderer.domElement.style.pointerEvents="none"

after adding this line it worked!

div1.style.pointerEvents = "stroke"