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 ： here

Answer 1

因此，对于点击部分，您需要从鼠标位置进行光线投射到模型。下面的链接应该为您提供足够的信息以便开始使用：

Raycaster

光线投射应该告诉你你击中了什么物体，然后你就可以记住该物体的使用（例如改变颜色属性）。

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

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

检测单击3DObject的网格

1 个答案: