Using raycaster to highlight a row of meshes three.js

Question

I am trying to use raycaster to identify a row of 3d cubes to be highlighted/colored on mousehover. I followed this post Change color of mesh using mouseover in three js. The issue I am facing is that it is only highlighting one cube i.e the cube the mouse is on and not the whole row. Please find my pseudocode below:

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) {

                    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;
                    }



                }

                 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;

                    }

                }
            }

Is there a way I can highlight all the cubes in a row as yellow instead of just one cube?

score 0 · Accepted Answer · answered May 16 '20 at 00:35

0

You need to keep your own data on which cubes are in which rows. When a cube is highlighted you need to look up the row its in and highlight the other cubes in the row

---pseudo code---

INTERSECTED = intersects[ index ].object;
row = getRowObjectIsIn(INTERSECTED)
for each object in row
   highlight object

answered May 16 '20 at 00:35

gman

100,619
31
269
393

Thanks for the reply @gman. I had a question though. If it identifies that one cube(which is 3d object of 9 small cubes) and colors the 9 cubes together as yellow, why didnt it color the whole row. I have passed cubeList.children as the array in intersectObjects. Each child is a row. – cotcs May 16 '20 at 13:28
I tried as you suggested and I can get it to highlight the row and unhighlight it as well (code edited above)but when it does that it gives a flickering light bulb effect. The yellow color flickers on all the cubes. Is it because its a group of 9 cubes? Is there a way I can make it stable? – cotcs May 18 '20 at 16:34

Using raycaster to highlight a row of meshes three.js

1 Answers1