Select objects in 3D space using mouse position (THREE.js R99)

Question

I am used the THREE.js CSS Render and have created a 3D cube out of 6 CSS3DObjects. I have been following this (code) example to add raytracing so that I can figure out on which side of the code the mouse is on.

function onDocumentMouseMove( event ) {    
  event.preventDefault();

    let mouse3D = new THREE.Vector2( 
      ( event.clientX / window.innerWidth ) * 2 - 1,   
      -( event.clientY / window.innerHeight ) * 2 + 1); 

    let raycaster =  new THREE.Raycaster();                                        
    raycaster.setFromCamera( mouse3D, camera );

    let intersects = raycaster.intersectObjects( scene.children, true );

    if ( intersects.length > 0 ) {               
        console.log(intersects);
    }
}

However, even if the mouse is over the cube, the intersects object stay empty

Codepen

UPDATE

So I tried to add a Mesh to the scene. Although the renderer will not render it, the raytracer appears to be picking it up. Does this mean that the CSS objects do not have a size?

var geometry = new THREE.BoxGeometry( 500, 500, 10 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cubeeee = new THREE.Mesh( geometry, material );
scene.add( cubeeee )

You could add event listeners straight to these 6 objects that form the cube. — prisoner849
the answer by @WestLangley helped me . here is the link: stackoverflow.com/questions/21531745/… — Faeze

Marquizzo Marquizzo · Accepted Answer · 2018-12-17T18:50:03

You don't need a raycaster with CSS3DObjects. The CSS3DRenderer just transforms your DOM Elements, so they're still available to receive regular JavaScript events in your document. With that in mind, you could simply add an event listener to each face:

domElement.addEventListener("mouseover", function(evt){
    console.log("Mouse is over " + evt.target);
});

Raytracing is better suited for Mesh objects, which exist only in the WebGL layer. The example you were following uses raycasting on Mesh.

Select objects in 3D space using mouse position (THREE.js R99)

1 Answers