THREE.js CSS2D文本标签-它们能被RayCasting交叉和识别吗？

Question

我一直在使用THREE.js开发一个粗略的图表工具，并使用THREE.js CSS2D工具为图表制作(可旋转和对MathJax友好的)文本标签。

我已经使用THREE.js雷射机实现了对普通网格对象(例如立方体、球体、线条)的对象选择，它工作得很好。当鼠标指针位于CSS2D文本标签上时，它将更改为文本光标。但是，raycaster不选择任何CSS2D标签对象。相反，它“看穿”标签，并将选择一个网格对象，如果一个恰巧在标签的远端。

我想知道是否有人能告诉我，为CSS2D对象选择对象是否可行，我可能需要做些什么才能让它工作呢？

Answer 1

CSS2DObject的实例始终是HTML的包装器。这意味着您可以简单地将事件侦听器添加到最顶部的HTML元素中，以检测交互：

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

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

const label = new CSS2DObject( text );

CSS2DObject不支持使用CSS2DObject。