使用光线施法器突出显示三行网格.js

Question

我正在尝试使用光线投射器来识别一排要在鼠标悬停上突出显示/着色的3D立方体。我关注了这篇文章 在三个js中使用鼠标悬停更改网格的颜色。我面临的问题是，它只突出显示一个立方体，即鼠标所在的立方体，而不是整行。请在下面找到我的伪代码：

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();

}

有没有办法将一行中的所有立方体突出显示为黄色，而不仅仅是一个立方体？

Answer 1

您需要保留自己的数据，了解哪些多维数据集位于哪些行中。当一个多维数据集突出显示时，您需要查找其所在行并突出显示该行中的其他多维数据集---伪代码---INTERSECTED = intersects[ index ].object;row = getRowObjectIsIn(INTERSECTED)for each object in row&nbsp; &nbsp;highlight object