Raycaster three.js - mouse cursor and highlight not exactly on the intersected mesh

Question

I am using raycaster to highlight a row of cubes . The cubes are arranged in a grid format. On mouse hover, row should be highlighted. It works fine but I have issues with the cursor turning a pointer exactly over the cubes in the row. Also, the highlight does not happen when I move the mouse over the cubes on the right side. But it only happens when I move it on the left side of the grid of cubes and also on the left side outside the grid. One single cube is actually a group of 9 small cubes. And I have the recursive flag set to true . So it identifies the 9 cubes individually as intersected meshes. Based on that I highlight the other cubes in the row. The cursor also changes to pointer in the same area where the highlight works. i.e. the left part of the grid. Is there a way to make the highlight and cursor work if I hover over any mesh in the row and not outside the grid?

var cubesList = new THREE.Group();

function createScene () {

var cubeSize = 2;



for ( var i = 0; i < noOfEntries; i++ ) {
    var entry = entries[ i ];

    var entryObjects = entry.objects;

    var entryCubesGroup = new THREE.Group();

    var noOfObjects = entry.objects.length;
    for ( var j = 0; j < noOfObjects; j++ ) {
        var object = entryObjects[ j ];


        var cube = createCube( cubeSize ); //THREE.Object3d group of 9 cubes

        entryCubesGroup.add( cube );
        if ( j === Math.round( noOfObjects / 4 ) - 1 && i === Math.round( noOfEntries / 4 ) - 1 ) {
            cameraTarget = cube;

        }

    }


    cubesList.add( entryCubesGroup );
}

scene.add( cubesList );

camera.position.x = 15;
camera.position.y = 15;
camera.position.z = 15;
camera.lookAt( new THREE.Vector3( cameraTarget.position.x, cameraTarget.position.y, cameraTarget.position.z ) );



var light = new THREE.PointLight( 0xffffff, 1, 0 );
light.position.set( 15, 15, 5 );
light.castShadow = true;
scene.add( light );

}

function animate () {

renderer.render( scene, camera );
update();

}

function onDocumentMouseMove ( event ) {

event.preventDefault();

mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.height ) * 2 + 1;



animate();

}

function update() {

            var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
            vector.unproject(camera);
            var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

            var intersects = ray.intersectObjects(eventCubesList.children, true);

            if (intersects.length > 0) {

                  $('html,body').css('cursor', 'pointer');
                if (intersects[0].object != INTERSECTED) {                       

                    if (highlightedRow)
                        unhighlightRow(highlightedRow);

                    INTERSECTED = intersects[0].object;
                    var timestamp = INTERSECTED.userData;

                    var selectedRow = getSelectedRow(timestamp);
                    highlightedRow = selectedRow;
                    highlightRow(selectedRow);

                }
                else {
                    if (INTERSECTED) {
                        if (highlightedRow) {
                            var timestamp = INTERSECTED.userData;
                            var row = getSelectedRow(timestamp);
                            unhighlightRow(row);
                        }
                        highlightedRow = null;

                    }


                    INTERSECTED = null;
                }



            }
            else
            {
                    $('html,body').css('cursor', 'default');
            }
                
        }

             function unhighlightRow(cubes) {
            for (var i= 0; i < cubes.length; i++) {
                var cube = cubes[i];
                for (var j = 0; j < cube.children.length; j++) {
                    var child = cube.children[j];
                    child.material.color.setHex(cube.originalColor);

                }


            }
        }

        function  highlightRow(cubes) {
            for (var i = 0; i < cubes.length; i++) {
                var cube = cubes[i];
                for (var j = 0; j < cube.children.length; j++) {
                    var child = cube.children[j];                       
                    child.material.color.setHex(0xffff00);
                    break;

                }

            }
        }

Answer 1

Never mind. I had to replace renderer.domElement with window while converting from space to NDC space. So it had to be

mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

That placed my cursor right over the cubes and not outside the grid.