Three.js raycasting does not work on DIV which is not full screen

Question

I wrote a simple web page displaying a 3D bone and using Three.js raycasting to draw dots and lines on it and it worked perfectly well. result of using raycast on full screen web page

But when I ported it to another web page having multiple windows, the process did not work.

I followed the instructions from fiddle http://jsfiddle.net/cn7ecoaa/ but still failed.

Here is the CSS:

.column2  {
    float: right;
    width: 80%;
    position: static;
}

#w3-container {
    width: 1522px;
    height: 1001px;
    position: static;
}

I loaded the model and examined it and it certainly contains mesh and buffer geometry: result of console.log after loading the 3D model

Here is the loader code :

gltfLoader.load (   
                    inputModel,
                
                    function(gltf)
                    {
                        scene.add(gltf.scene);
                        model = gltf.scene;
                        mesh = gltf.scene.children[0];

                        mesh.name = "tibia_glTF_01";
                        
                        model.traverse
                        ( function ( child ) 
                            {
                                
                                if ( child.isMesh && child.geometry.isBufferGeometry) 
                                { 
                                    const material = new THREE.MeshPhongMaterial(  {color:0x3c3c3c, emissive: 0x000000 } );
                                    child.material = material;
                                    const bg = child.geometry;
                                    console.log("Do not change geometry.");
                                    
                                }
                            }  
                        );

                        getItem();  // Refresh the item list to be displayed

                        objects.push( mesh );
                        
                    });

Here is the code for handling the onmousedown event :

function onMouseDown( event ) {

    if ( !DRAWLINE ) return;

    var raycaster = new THREE.Raycaster();

    event.preventDefault();

    mouse.x = (( event.clientX - renderer.domElement.offsetLeft) / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - (( event.clientY - renderer.domElement.offsetTop) / renderer.domElement.clientHeight ) * 2 + 1;

    console.log("mouse.x", mouse.x, "mouse.y", mouse.y);

    console.log("Objects", objects);

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        alert("HIT!");

        dot.visible = true;

        // Copy the intersection points to be used in functions addPoint()
        mouse.copy( intersects[0].point );

        intersects.length = 0; // reset the variable
    
        addPoint();

    } else {

        console.log( "<<NO Intersection!!>>" );

    }

}

No matter what combinations I have used to cater for the offset, the result of raycasting is still "<<NO Intersection!!>>".

Any idea on how to fix this would be much appreciated! Thanks for your help!

Answer 1

Try computing your mouse coordinates like so:

const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect. right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;