Question

使用raycaster正确检测鼠标点击事件时遇到问题。我制作了一个带有动画抽屉的家具模型。我想在鼠标点击时将其位置从关闭更改为打开。在使用默认抽屉数量加载模型后，一切正常，但是当我重新加载具有不同数量的模型时，点击事件开始以未定义的方式运行。有时不是单击一次，而是相互作用两次甚至更多，因此效果是不可见的（一次打开和关闭）这些是我的代码的一部分，负责光线投射和处理事件

var raycaster = new THREE.Raycaster();
$camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
$camera.position.set(model.camera.position.x, model.camera.position.y, model.camera.position.z);

$container.addEventListener ("mousedown", function(event) {
    event.preventDefault();
    var rect = document.getElementById('canvas-handler').getBoundingClientRect();
    var canv = document.getElementById('canvas-handler');
    mouse.x = ( (event.clientX - rect.left) / canv.clientWidth) * 2 - 1;
    mouse.y = - ( (event.clientY - rect.top) / canv.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, $camera );

    var arr = $doors.concat($drawers);;
    var intersects = raycaster.intersectObjects( arr, true );
    if ( intersects.length > 0 ) {
        intersects[0].object.parent.onclickCallback();
    }
    return false;
}, false);

阵列$ doors和$ Drawers包含我想要动画的3D对象。对象具有改变位置的onclickCallback（）函数。

raycaster.intersectObjects的第二个参数为true，因为抽屉数组包含每个抽屉的父点。递归应该允许访问子多维数据集（抽屉部件）

Three.js Raycaster无法正常工作

0 个答案: