we are facing one problem with ThreeJS. We are trying to include HTML elements within ThreeJS and we are raycasting to get if we are pointing to any HTML element. But when we intersect it, returns an empty array. A simple example is the next one:
https://codepen.io/wazosa/pen/OJrqRRy?editors=1111
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(scene, true);
console.log(intersects)
if (intersects.length > 0) {
var object = intersects[0].object;
}
You have a div and a cube, when you click over the cube it returns a console with it, but when you try to click on div element it returns an empty array. Any suggestions?
Thx in advance