javascript - 如何使用 HTML 元素阻止 THREE.js 光线转换？

Question

我希望我页面上的 HTML 元素能够阻止三个 js 光线转换，我该怎么做？我遇到的问题是，当用户单击打开的 DIV 元素时，光线转换会检索场景中的对象(它会检索 DIV 后面的对象)。我不想在 DIV 打开时禁用光线转换，我只想让 DIV 阻挡光线转换。

谢谢，回复

Answer 1

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

假设您有一个这样的 dom 结构:

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

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

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

如果您在 Canvas 元素本身上监听光线转换器的事件，它会变得更加容易。在这种情况下，事件永远不会到达 Canvas 元素，您无需执行任何特殊操作。