如何阻止带有THREE.js元素的HTML？
提问于 2016-09-11 10:56:33
我想在我的页面上的超文本标记语言元素阻止THREE.js光线投射，我该怎么做呢？我遇到的问题是，当用户单击打开的DIV元素时，光线投射会检索场景中的对象(它检索DIV后面的对象)。我不想在DIV打开的时候禁用光线投射，我只是想让DIV阻止光线投射。
谢谢，里斯
回答 2
Stack Overflow用户
发布于 2016-09-11 16:39:06
最好的方法可能是使用DOM事件处理。
假设你有一个像这样的dom结构：
<div class="container">
<canvas class="threejs-canvas"></canvas>
<div class="some-overlay"></div>
</div>如果希望画布中的交互不影响画布元素中的three.js场景，则需要做两件事：
- 光线投射器应该只使用叠加中的容器上发生的事件需要使用
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-element，并且您不需要做任何特殊的事情。
Stack Overflow用户
发布于 2019-01-23 10:56:26
就我个人而言，我推荐Martins回答。这就是我要做的，因为你可以更好地控制你要传递的事件。要有另一种解决方案，您可能只需要尝试使用css和2div即可。
div.overlay{
pointer-events:none
}
<canvas>
<div class="overlay">
<div class="overlayChild">
<a>CLICK</a>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39435334
复制相关文章
腾讯云开发者
