如何使用 HTML 元素阻止 THREE.js 光线投射？答案

【问题标题】：How can I block a THREE.js raycast with HTML elements?如何使用 HTML 元素阻止 THREE.js 光线投射？
【发布时间】：2019-01-23 18:56:26
【问题描述】：

我希望我的页面上的 HTML 元素阻止 THREE.js 光线投射，我该怎么做？我遇到的问题是当用户单击打开的 DIV 元素时，光线投射会检索场景中的对象（它检索 DIV 后面的对象）。我不想在 DIV 打开时禁用光线投射，我只是希望 DIV 阻止光线投射。

谢谢，里斯

【问题讨论】：

标签： javascript html three.js

【解决方案1】：

最好的方法可能是使用 DOM 事件处理。

假设你有一个这样的 dom 结构：

<div class="container">
  <canvas class="threejs-canvas"></canvas>
  <div class="some-overlay"></div>
</div>

并且您希望.some-overlay 中的交互不会对 canvas-element 中的 three.js 场景产生影响，您需要做两件事：

raycaster 应该只使用在.container-element 上发生的事件
叠加层内的点击需要使用stopPropagation() 来阻止事件冒泡到容器中

所以，这可能是这样的：

var container = document.querySelector('.container');
var overlay = document.querySelector('.some-overlay');

container.addEventListener('click', function() {
  // do raycasting here
});

overlay.addEventListener('click', function(ev) {
  ev.stopPropagation(); // prevent event from bubbling up to .container

  // ...do whatever you like
});

如果您在画布元素本身上监听光线投射器的事件，它会变得更加容易。在这种情况下，事件将永远不会到达画布元素，您无需做任何特别的事情。

【讨论】：

如果选择 div，请注意您在哪个阶段停止传播、冒泡或捕获阶段。在复杂的应用程序中，这是非常重要的，我对此感到很头疼，尤其是在 ios safari 中。

【解决方案2】：

就个人而言，我建议 Martins 回答。我就是这样做的，因为您可以更好地控制您通过的事件。只是为了有另一种解决方案，您可以尝试仅使用 css 和 2 个 div。

div.overlay{
   pointer-events:none
}


<canvas>
<div class="overlay">
  <div class="overlayChild">
    <a>CLICK</a>
  </div>
</div>

【讨论】：