Three.js 通过 dat.gui 组合框防止光线投射

Question

我已经在这里问了一个几乎类似的问题：

这有效：

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

         enableRaycasting = false;

     } );

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

        enableRaycasting = true;

     } );

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

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

Answer 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元素就不会触发canvas的mousedown事件了，不用担心跟踪.mouseenter和.mouseleave 状态，这可能会变得有点复杂。

Three.js 通过 dat.gui 组合框防止光线投射

Three.js Prevent Raycast through dat.gui combobox

jquery

three.js

raycasting