Javascript 在three.js中超链接CSS3D对象

我的目标是能够在three.js环境中创建导航栏。Iv适当地设置了所有CSS3D，并设置了鼠标按下事件监听器，但当涉及到交叉时，什么都不会出现

//CSS3D Scene
scene2 = new THREE.Scene();

//HTML
element = document.getElementById('dialogueBox');
shop = document.getElementById('shop');
FREEkxxx = document.getElementById('FREEkxxx');

//card
card = new THREE.CSS3DObject(element);
card.position.x = 0;
card.position.y = 0;
card.position.z = 0;
scene2.add(card);

//shop link
shopNav = new THREE.CSS3DObject(shop);
shopNav.position.x = -250;
shopNav.position.y = 250;
shopNav.position.z = 0;
shopNav.userData = {
    URL: "http://stackoverflow.com",
          name: "shopNav"
    };
    scene2.add(shopNav);

// videolink
FREEkNav = new THREE.CSS3DObject(FREEkxxx);
FREEkNav.position.x = 220;
FREEkNav.position.y = 250;
FREEkNav.position.z = 0;
FREEkNav.userData = {
    URL: "http://stackoverflow.com",
    name: "FREEkNav"
};
scene2.add(FREEkNav);

// grouping the nav objects
nav = new THREE.Object3D();

nav.add(shopNav);
nav.add(FREEkNav);

nav.userData = {
    URL: "http://stackoverflow.com",
    name: "FREEkNav"
};

scene2.add(nav);

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

var raycaster = new THREE.Raycaster(),
    INTERSECTED;
var mouse = new THREE.Vector2();

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);
    intersects = raycaster.intersectObjects(nav.children);
    console.log(intersects)
    if (raycaster.intersects === shopNav) {
        window.open(link1)
    } else if (raycaster.intersects === FREEkNav) {
        window.open(link2)
    }
};

---

I'v使用THREE.Object3D对2个导航元素进行分组；因此，我假设可以使用nav.children进行相交，但当您console.log相交并单击其中一个nav元素时，您将一无所获。

无需对CSS3D对象进行光线投射。毕竟，CSS3DObject仍然是一个HTML元素，只是具有更复杂的CSS transformMatrix属性。您可以像添加任何其他HTML元素一样向其添加事件侦听器，因为它仍然是DOM的一部分：

var element = document.getElementById('dialogueBox');

// Add click listener as usual
element.addEventListener("click", function(event){
    console.log("I've been clicked!");
    console.log(event);
});

//card
card = new THREE.CSS3DObject(element);
card.position.x = 0;
card.position.y = 0;
card.position.z = 0;
scene2.add(card);

在处理位于上下文中的THREE.Mesh、THREE.Point或其他基于WebGL的元素时，只需执行光线投射