Three.js 通过 dat.gui 组合框防止 Raycast答案

【问题标题】：Three.js Prevent Raycast through dat.gui comboboxThree.js 通过 dat.gui 组合框防止 Raycast
【发布时间】：2020-03-13 18:18:33
【问题描述】：

我已经在这里问过一个几乎类似的问题： Three.js prevent Raycast through Gui

这行得通：

    $( gui.domElement ).mouseenter(function(evt) {

         enableRaycasting = false;

     } );

    $( gui.domElement ).mouseleave(function() {

        enableRaycasting = true;

     } );

但仍然出现问题：我的 dat.gui 中有一个组合框，其中包含一些项目。当盒子的元素少于 6 个时，一切都很好，但如果它的元素多于 5 个，它就会伸出 gui（因为 gui 在上角）并进入光线投射的场景。然后我无法再选择框中的项目，并且启用了光线投射。当组合框的项目超出 gui.domElement 的区域时，如何防止光线投射？

编辑：有时它甚至可以工作，有时不能。这取决于是否以某种方式在焦点之前和焦点上单击了 gui，我不知道确切..

【问题讨论】：

您能否从您的其他帖子中增强现有的示例 (jsfiddle.net/gnwz5ae7) 并演示问题？
@Mugen87 我想我改变了这个例子：jsfiddle.net/v046m7ob/1

标签： jquery three.js raycasting

【解决方案1】：

您之前的问题将事件侦听器绑定到整个 document 对象，如下所示：

document.addEventListener( 'mousedown', onDocumentMouseDown, false );
function onDocumentMouseDown( event ) {
    if (event){}
}

这样做会劫持页面上任何地方发生的每个mousedown 事件，包括发生在 Dat.gui 元素上的事件。您应该更细致地了解如何定位您的事件，因此它不包含整个文档。例如，您可以只定位<canvas> element that the THREE.js renderer creates：

// Init renderer
var renderer = new THREE.WebGLRenderer();

// Add canvas to HTML body
document.body.appendChild( renderer.domElement );

// Assign event listener to only target this canvas
renderer.domElement.addEventListener( 'mousedown', onCanvasMouseDown, false );
function onCanvasMouseDown( event ) {
    if (event){}
}

这样单击dat.gui 元素不会触发画布的mousedown 事件，您不必担心跟踪.mouseenter 和.mouseleave 状态，这可能会有点复杂。

【讨论】：