Detect Label in ThreeJS

userWVAO 0
Viewed 30

I have a simple Threejs code where I am testing the click event with Raycaster. I used the BOX geometry to create three cubes. Using CSS2DRenderer.js, I have added a label above one of the cubes. I want to click on the label to bring up a popup with some information. I see that the cubes are detected when I click, but the label is not. Is the raycaster limited to meshes? If that's the case, how do I detect my label on click? You can find the click event code below:

window.addEventListener('click', event => {
    raycaster.setFromCamera(clickMouse, camera);
    const found = raycaster.intersectObjects(scene.children);
    console.log(found);
});
three.js javascript
1 Answers

You can only use Raycaster for detecting 3D objects like meshes, point clouds or lines. For labels rendered via CSS2DRenderer, you can just add a pointerdown event listener to the respective label DOM element.

Mugen870
Related