我希望页面上的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/