检测点击 3D 对象的网格

Question

我从 .obj 和 .mtl 加载了一个模型，我希望用户能够单击模型的特定部分，例如，更改它们的颜色。即点击车门并能够更改该门网的颜色。

这是我的模型加载代码，如果需要的话。

var mtlLoader = new THREE.MTLLoader();
    mtlLoader.setPath('Models/Aventador/');
    mtlLoader.load('Avent.mtl', function (materials) {
        materials.preload();
        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('Models/Aventador/');
        objLoader.load('Avent.obj', function (object) {
            object.position.y = 0;          
            scene.add(object);
        }, onProgress, onError);
    });

编辑： 我现在有以下代码，它没有给出错误并按预期将“mouseup”打印到控制台，但没有按预期打印出任何交叉点，有什么想法吗？

var mouse = new THREE.Vector2();
function onDocumentMouseUp(event) {
    console.log("mouseUp")
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);
    for (var i = 0; i < intersects.length; i++) {
        console.log(intersects[i]);
        intersects[i].object.material.color.set(0x0000ff);
    }
}

编辑 2：

Answer 1

因此，对于单击部分，您需要从鼠标位置向模型投射光线。下面的链接应该会为您提供足够的信息以帮助您入门：

Raycaster

光线投射应该告诉你你击中了哪个对象，然后你可以记住该对象以供使用（例如更改颜色属性）。

在回答您的其他问题时，objects 类似于上面链接中的scene.children。您也可以只将网格传递给它，看看它是否击中它（而不是说，你让汽车坐在一个光或平面上作为表面）。

编辑：因为它是一个 Obj，我们在聊天中发现我们需要跟随 this answer 并在光线投射上启用递归以使其检测所需的模型部分。