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

Question

我正在 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);
});

Answer 1

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

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

Answer 2

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

这对我来说非常有效。

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

Make HTML Content Clickable Over Three.js Content

html

javascript

css

animation

three.js