THREE.js CSS2D 文本标签 - 它们可以被 RayCasting 相交和识别吗？

Question

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

我已经使用 THREE.js raycaster 为普通网格对象（例如立方体、球体、线）实现了对象拾取，并且工作正常。当鼠标指针位于 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 不支持使用 THREE.Raycaster。

THREE.js CSS2D 文本标签 - 它们可以被 RayCasting 相交和识别吗？

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

css

three.js

raycasting