CODEWITHSUNDEEP
javascripthtmlthree.js
dehnm
dehnm

Reputation: 101

hyperlinking CSS3D object in three.js

My goal is to be able to create a navbar in the three.js environment. Iv set up all the CSS3D appropriately and have set up a mouse down event listener but when it comes to intersects nothing comes up.

//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 grouped the 2 nav elements using THREE.Object3D(); so i assumed i could intersect using nav.children but when you console.log intersects and click one the nav elements you get nothing / [].

Upvotes: 0

Views: 400

Answers (1)

M -
M -

Reputation: 28502

There's no need to do raycasting on CSS3D Objects. After all, a CSS3DObject is still an HTML element, just with a more complex CSS transformMatrix() property. You can add event listeners to it like any other HTML element, as it's still part of the 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);

You only need to do raycasting when dealing with THREE.Mesh, THREE.Point or other WebGL-based elements that live inside the <canvas> context.

Upvotes: 1

Related Questions