使HTML内容可在Three.js内容上单击

Question

我正在Three.js中制作一个移动对象的动画。在这个动画中，我在单击对象时创建了一个文本气泡，它有一个"X〃；按钮关闭它。但是，如果x按钮覆盖Three.js中的3D对象，则该按钮将被完全忽略，而3D对象将被单击。我该如何避免这种情况，并允许此HTML内容始终具有优先级？

如果有帮助的话，我正在使用光线投射来检测三维对象上的单击。我已经尝试过给按钮一个更高的z阶，但没有成功。而且，为了清楚起见，HTML内容在视觉上位于3D对象之上。

此外，如果在文本气泡中单击不会直接落到文本气泡下的对象，那就太好了。

编辑：这是我的onclick函数的简化代码(适用于我的3D对象(。我为我的按钮绑定了一个不同的onclick函数。

document.addEventListener('mousedown', () => {
raycaster.setFromCamera(mouse, camera);
const hits = raycaster.intersectObjects(scene.children);
if(hits.length > 0) {
---do stuff---
}
renderer.render(scene, camera);
});

Answer 1

对于可点击的对象，我只使用z-index就可以实现这一点，但如果这不起作用，您可以尝试在3D渲染中使用pointer-events: none;。请在此处查看屏幕截图https://streamable.com/yzp68c.webGL地球仪在react中使用了三个.js，是链接位于顶部的活动区域的全宽。

那么外部容器是position: relative;。。。链接位于position: absolute; z-index: 1000;内部的一个div中，然后earth three.js渲染器是最后一个div，但仍在容器中。

Answer 2

请参阅此链接中的首要答案：如何使用HTML元素阻止THREE.js光线投射？

这对我来说非常有效。