如何阻止带有HTML元素的THREE.js射线广播？

Question

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

谢谢，里斯

Answer 1

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

假设您具有如下所示的dom结构：

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

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

1. 在raycaster应该只使用上所发生的事件.container-元素
2. 叠加层中的点击需要用来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
});

如果您在画布元素本身上侦听raycaster的事件，它将变得更加容易。在这种情况下，事件将永远不会到达画布元素，并且您无需执行任何特殊操作。