使用 raycaster 高亮显示一行网格 three.js

Question

我正在尝试使用 raycaster 来识别鼠标悬停时 highlighted/colored 的一行 3d 立方体。我遵循了这个 post 。我面临的问题是它只突出显示一个立方体，即鼠标所在的立方体而不是整行。请在下面找到我的伪代码：

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;

                    }

                }
            }

有没有一种方法可以将一行中的所有立方体高亮显示为黄色，而不是只有一个立方体？

Answer 1

您需要保留自己的数据，了解哪些立方体位于哪些行中。当一个多维数据集被突出显示时，您需要查找其所在的行并突出显示该行中的其他多维数据集

---伪代码---

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

使用 raycaster 高亮显示一行网格 three.js

Using raycaster to highlight a row of meshes three.js

javascript

arrays

mouseover

three.js

raycasting