使用对象ID进行的射线广播无法正常工作：threeJS

Question

我正在尝试通过射线投射，以其对象ID作为参考，为模型的不同部分分配不同的标准材料。但是，当我尝试将多个材质应用于同一模型的不同ID时，所有对象都显示相同的材质。无法区分ID。

相同的代码在下面。

var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {

  for (var i = 0; i < intersects.length; i++) {
    if (intersects[i].object.id) {

      intersects[i].object.material = material1; /* standrad material */
      intersects[i].object.material.needsUpdate = true;
    }
  }

    /* I'm using the buttons to change the materials */

    $('.btn1').click(function() {
      for (var i = 0; i < intersects.length; i++) {
        intersects[i].object.material = material2;
        intersects[i].object.material.needsUpdate = true;
      }
    });

    $('.btn2').click(function() {
      for (var i = 0; i < intersects.length; i++) {
        intersects[i].object.material = material3;
        intersects[i].object.material.needsUpdate = true;
      }
    });
  }

Answer 1

这里是构造类似这样的一种方法：

function materialSwitchingTest(renderer,camera){

    var mouseVec = new THREE.Vector3();
    var mouse2D = new THREE.Vector3();
    var rawMouse2D = new THREE.Vector3();
    var intersections;

    /* I'm using the buttons to change the materials */
    $('.btn1').click(function() {
        if(intersections.length>0) intersections[0].object.material = material1
    });

    $('.btn2').click(function() {
        if(intersections.length>0) intersections[0].object.material = material2
    });

    window.onmousedown=(e)=>{
        if(event.target !== renderer.domElement.parentElement)return

        var mx = event.layerX;
        var my = event.layerY;
        rawMouse2D.set(mx, my, 0);
        mouse2D.x = (mx / renderer.domElement.width) * 2 - 1;
        mouse2D.y = -(my / renderer.domElement.height) * 2 + 1;
        mouseVec.set(mouse2D.x, mouse2D.y, 0.5);
        mouseVec.unproject(camera);
        raycaster.set(camera.position,mouseVec.sub(camera.position).normalize());
    }
}


materialSwitchingTest( yourRenderer, yourCamera )