如何通过HTML/CSS覆盖元素阻止Three.js Raycaster生效？

你遇到的情况是因为点击事件绑定在window上，即便上层有upper_layer这个div，点击事件会通过事件冒泡传递到window，导致Raycaster的检测逻辑依然执行。要阻止它，有几种简单的实现方式：

方法1：让上层div拦截点击事件，阻止冒泡 #

给upper_layer添加点击事件监听，在回调里阻止事件继续向上冒泡，这样window上的点击监听就不会触发了：

<div id="upper_layer" style="width:100%; height: 100%; background: #090; opacity: 0.5; position: absolute; z-index: 200;">    
</div>
<script>
document.getElementById('upper_layer').addEventListener('click', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到window
});
</script>

方法2：把点击事件绑定到Canvas元素而非window #

原来的代码是给window加点击监听，改成给Three.js生成的Canvas元素绑定，这样点击上层div时，事件不会触发Canvas的监听：

// 替换原代码中的window.addEventListener
renderer.domElement.addEventListener('click', OnMouseClick);

注意：别搞反pointer-events的用法——如果给upper_layer加pointer-events: none，会让点击穿透div直接触发下层Canvas事件，这和你要的效果相反。

内容的提问来源于stack exchange，提问作者Oto Shavadze