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

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

谢谢， 里斯

做到这一点的最佳方法可能是使用 DOM 事件处理。

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

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

你想要互动.some-overlay为了不影响 canvas-element 中的 Three.js 场景，您需要做两件事：

1. 光线投射器应该只使用发生在.container-element
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
});

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