Three.js

Question

在我的 three.js 场景中，我可以添加和编辑对象。我最近添加了一个 DAT.GUI 文件夹，我可以在其中编辑对象颜色。但是当没有任何 SELECTED 对象时，我用 jQuery:

隐藏它

function onDocumentMouseDown(event){
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(objects);
    if(intersects.length > 0){
        SELECTED = intersects[ 0 ].object;

        control.attach(SELECTED);
        scene.add(control);
        $(guiObject.domElement).attr("hidden", false);
    } else{
        control.detach(SELECTED);
        scene.remove(control);
        control.update();
        $(guiObject.domElement).attr("hidden", true);
    }
}

但问题是，当我单击该按钮时，它会消失，因为如果用户单击该对象以外的其他地方，我希望取消选择该对象。

有什么解决办法？

Answer 1

感谢Falk，问题解决

我不得不将我的功能更改为：

function onDocumentMouseDown(event){
    event.preventDefault();
    if($(event.target).is('canvas')){
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);
        var intersects = raycaster.intersectObjects(objects);
        if(intersects.length > 0){
            SELECTED = intersects[ 0 ].object;

            control.attach(SELECTED);
            scene.add(control);
            $(guiObject.domElement).attr("hidden", false);
            // SELECTED.material.color.setHex( Math.random() * 0xffffff );
        } else{
            control.detach(SELECTED);
            scene.remove(control);
            control.update();
            $(guiObject.domElement).attr("hidden", true);
        }
    } else{
        $(guiObject.domElement).attr("hidden", false);
    }
}

Three.js - Selected/Deselected 对象

Three.js - Selected/Deselected object

javascript

selected