javascript - Three.js 中的超链接 CSS3D 对象

Question

我的目标是能够在 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)
    }
};

我使用 THREE.Object3D() 对 2 个导航元素进行分组；所以我假设我可以使用 nav.children 相交，但是当你 console.log 相交并单击一个 nav 元素时，你什么也得不到/[]。

Answer 1

无需对 CSS3D 对象进行光线转换。毕竟，一个CSS3DObject仍然是一个 HTML 元素，只是具有更复杂的 CSS transformMatrix()属性(property)。您可以像任何其他 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或 <canvas> 内的其他基于 WebGL 的元素上下文。