THREE.js CSS2D Text Labels - Can they be intersected and identified by RayCasting?

user_2748766 0
Viewed 638

I have been developing a rough diagramming tool using THREE.js and have been using the THREE.js CSS2D facility to make (rotatable and MathJax-friendly) text labels for the diagrams.

I have implemented object picking for ordinary mesh objects (e.g. cubes, spheres, lines) using the THREE.js raycaster and it works fine. The mouse pointer changes to the text cursor when it is over a CSS2D text label. However raycaster does not pick any of the CSS2D label objects. Instead it "sees through" the labels and will pick a mesh object if one happens to be on the far side of the label.

I wonder if anyone can tell me whether object picking for CSS2D objects is feasible and what I might need to do to get it working?

raycasting three.js css
1 Answers

An instance of CSS2DObject is always a wrapper around HTML markup. That means you can simply add event listeners to the top most HTML element in order to detect interaction:

const text = document.createElement( 'div' );
text.className = 'label';
text.textContent = 'MyLabel';

text.addEventListener( 'pointerenter', event => console.log( event ) );

const label = new CSS2DObject( text );

Using THREE.Raycaster is not supported with CSS2DObject.

user_52508470
Related