使 HTML 内容在 Three.js 内容上可点击答案

【问题标题】：Make HTML Content Clickable Over Three.js Content使 HTML 内容在 Three.js 内容上可点击
【发布时间】：2021-12-28 21:46:15
【问题描述】：

我正在 Three.js 中制作带有移动对象的动画。在这个动画中，我在单击对象时创建了一个文本气泡，并且它有一个“X”按钮来关闭它。但是，如果 x 按钮覆盖 Three.js 中的 3D 对象，则该按钮将被完全忽略，而是单击 3D 对象。我怎样才能避免这种情况，而是让这个 HTML 内容始终具有优先权？

我正在使用光线投射来检测我的 3D 对象上的点击，如果这有帮助的话。我已经尝试给按钮一个更高的 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);
});

【问题讨论】：

标签： javascript html css animation three.js

【解决方案1】：

我能够通过对可点击对象的 z-index 做出反应来实现这一点，但如果这不起作用，您可以尝试在 3D 渲染上使用 pointer-events: none;。在此处查看屏幕截图https://streamable.com/yzp68c。 webGL 地球在 react 中使用了 three.js，并且是链接位于顶部的活动区域的整个宽度。

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

【讨论】：

嗯，好吧，不幸的是，这似乎对我不起作用，但希望它在正确的轨道上。您能否分享您的 document.addEventListener('mousedown')（或 'click'）函数的代码？这可能是我遇到问题的地方。
我的听众和我想的差不多....document.addEventListener("keyup", listener); return () => {document.removeEventListener("keyup", listener);};

【解决方案2】：

在此链接查看最佳答案：How can I block a THREE.js raycast with HTML elements?

这对我来说非常有效。

【讨论】：