我希望页面上的HTML元素阻止3.js光线投射,我如何才能做到这一点?
我遇到的问题是,当用户单击open DIV元素(它检索DIV后面的对象)时,raycast检索场景中的对象。我不想在DIV打开时禁用光线投射,我只希望DIV阻止光线投射。
谢谢,
里斯

最佳答案

最好的方法可能是使用DOM事件处理。
假设您有这样一个dom结构:

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

如果希望.some-overlay中的交互不会对canvas元素中的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
});

如果您在画布元素本身上监听raycaster的事件,则会变得更加容易。在这种情况下,事件永远不会到达canvas元素,也不需要做任何特殊的事情。

关于javascript - 如何阻止带有HTML元素的THREE.js射线广播?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39435334/

10-12 12:56
查看更多