2

我需要通过单击对象和弹出的非模式对话框来选择对象以显示有关对象的信息。它可以正常工作，但是如果用户单击任何 GUI 项，包括对话框，并且后面有一个对象，则将选取三个 js 对象，从而更改弹出窗口中的信息。

这是片段。

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

jQuery 对话框生成器：

function createDialog(title, text, top) {
      return $("<div class='dialog' title='" + title + "'><p id='bodyText'> " + text + "</p></div>")
      .dialog({ position: { my: ("right" + 0 + "top+" + top), at: "right top" },
      close : setDialogNull, });
}

onMouseDown 函数：

function onDocumentMouseDown( e ) {
    e.preventDefault();
    console.log(dialog);
    var mouseVector = new THREE.Vector3();
    mouseVector.x = 2 * (e.clientX / window.innerWidth ) - 1;
    mouseVector.y = 1 - 2 * ( e.clientY / window.innerHeight );
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouseVector, camera );
    var intersects = raycaster.intersectObjects(objectCollection );

    if (intersects.length > 0) {
        var selectedObject = intersects[0];
        console.log("Intersected object", intersects[0]);
        selectedObject.object.material = (selectedObject.object.material.wireframe) ? selectedBoxMaterial : unselectedBoxMaterial;

        var text = intersects[0].distance;
        var title = "Shelf info";

        if (dialog == false) {
            createDialog(title, text, offset);
            offset = offset - 50;
            console.log(offset);
            dialog = true;

            console.log(dialog);
        }   

        if (dialog == true) { 
            {jQuery("#bodyText").text(text);
        }
    }   
}

其他 GUI 元素是使用 dat.GUI 创建的。

在搜索此问题时，大多数结果都是关于 Unity，而不是作为经验丰富的开发人员，我并不真正了解如何适应它们。

4

1 回答 1

1

如果没有更多代码来了解您的设置和事件，就很难知道解决方案是什么。我会给保存你的 three.js 的元素一个特定的 ID，并在 onDocumentMouseDown 中检查它是否是活动元素。您可能需要检查 document.activeElement.parentElement.id 或其他内容，具体取决于您的设置。

function onDocumentMouseDown( e ) {
    if(document.activeElement.id != "myThreeJSElementID"){
        //some other element has been clicked so let's return with nothing:
        return;
    }
    e.preventDefault();
    console.log(dialog);
    var mouseVector = new THREE.Vector3();
    mouseVector.x = 2 * (e.clientX / window.innerWidth ) - 1;
    mouseVector.y = 1 - 2 * ( e.clientY / window.innerHeight );
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera( mouseVector, camera );
    var intersects = raycaster.intersectObjects(objectCollection );

    if (intersects.length > 0) {
        var selectedObject = intersects[0];
        console.log("Intersected object", intersects[0]);
        selectedObject.object.material = (selectedObject.object.material.wireframe) ? selectedBoxMaterial : unselectedBoxMaterial;

        var text = intersects[0].distance;
        var title = "Shelf info";

        if (dialog == false) {
            createDialog(title, text, offset);
            offset = offset - 50;
            console.log(offset);
            dialog = true;

            console.log(dialog);
        }   

        if (dialog == true) { 
            {jQuery("#bodyText").text(text);
        }
    }   
}

更理想的是，您应该为您的 three.js 容器设置一个特定事件，而不是使用全局文档事件，但现在应该有一个例外。许多代码示例出于简单而不是最佳实践而使用 document.addEventListener。

于 2016-07-11T16:48:44.540 回答