Raycaster three.js - 鼠标光标和突出显示不完全在相交的网格上答案

【问题标题】：Raycaster three.js - mouse cursor and highlight not exactly on the intersected meshRaycaster three.js - 鼠标光标和突出显示不完全在相交的网格上
【发布时间】：2020-10-12 12:58:18
【问题描述】：

我正在使用 raycaster 突出显示一排立方体。立方体以网格格式排列。鼠标悬停时，行应突出显示。它工作正常，但我遇到了光标将指针准确地移到行中的立方体上的问题。此外，当我将鼠标移到右侧的立方体上时，不会出现突出显示。但是只有当我将它移动到立方体网格的左侧以及网格的左侧时才会发生这种情况。一个立方体实际上是一组 9 个小立方体。我将递归标志设置为 true 。因此，它将 9 个立方体分别标识为相交网格。基于此，我突出显示该行中的其他立方体。光标也会在突出显示所在的同一区域变为指针。即网格的左侧部分。如果我将鼠标悬停在行中的任何网格上而不是网格之外，有没有办法使突出显示和光标起作用？

var cubesList = new THREE.Group();

函数 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 );

}

函数动画（）{

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

}

函数onDocumentMouseMove（事件）{

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;

                }

            }
        }

【问题讨论】：

标签： javascript css three.js mouseover raycasting

【解决方案1】：

没关系。在从空间转换为 NDC 空间时，我不得不用 window 替换 renderer.domElement。所以它必须是

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

这将我的光标放在立方体上而不是网格之外。

【讨论】：