Question

我希望我页面上的HTML元素能够阻止THREE.js光线投射，我该怎么做？我遇到的问题是当用户点击打开的DIV元素（它检索DIV后面的对象）时，raycast会检索场景中的对象。我不想在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场景产生影响，您需要做两件事：

raycaster应该只使用.container - 元素
叠加内的点击需要使用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-element本身上监听raycaster的事件，那就更容易了。在这种情况下，事件将不会到达canvas元素，并且您不需要做任何特殊的事情。

Answer 2

我个人建议马丁斯回答。这就是我要做的，因为您可以更好地控制传递的事件。如果有其他解决方案，您可能只能在css和2 divs上尝试。

div.overlay{
   pointer-events:none
}


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

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

2 个答案: