X3dom click away事件

Question

我目前正在使用X3DOM在网页上显示一些3D模型。重点是，当在画布中单击模型时，我会逐个为它们上色，当单击离开时，我希望它恢复到原来的颜色，我的意思是，仍然在X3DOM画布中，但不在X3DOM节点上，如形状或其他。

为此，我需要在单击空格时获取事件，或者找到一种方法来确定我没有单击某个形状或任何东西，而是仍然在x3dom画布上单击。

这就是我需要帮助的地方，因为我在做以下事情时捕获到的唯一一件事：

document.onload = function() {

    var $element = document.getElementById("the-one");

    $element.addEventListener("click", function(event) {

        console.log(event);

    }, false);
};

是x3dom画布上的单击事件(#the-one)，而不是其他任何事件，即使我单击了一个形状(我可以在该形状的onclick事件上执行一个处理程序，但因此它将在一个不同的函数中，因此不能知道我是否单击了)。

Answer 1

不知何故，我找到了一个方法：

document.onload = function() 
{
    // The X3D element
    var $element = document.getElementById("the-one");

    // Adding the click event
    $element.addEventListener("click", function(event)
    {
        // Get the position of the mouse in the canvas
        var canvasPos = this.runtime.mousePosition(event);

        // Return an array of shape elements contained in a rect on the canvas (x1,y1 and x2,y2)
        var picked = this.runtime.pickRect(canvasPos[0], canvasPos[1], canvasPos[0], canvasPos[1]);

        if (picked.length)
        {
            // do whatever you want
        }

    }, false);
};

如果数组中没有任何内容，则表示用户没有选择任何形状。