threejs中射线Raycaster拾取深度和renderOrder渲染顺序的问题

[zp1112]

Raycaster拾取物体的方式

raycaster通过鼠标位置拾取鼠标所在的物体。

 onDocumentMouseOver: function (event) {
    const mouse = new THREE.Vector2();
    mouse.x = (event.clientX / this.width) * 2 - 1;
    mouse.y = - (event.clientY / this.height) * 2 + 1;
    this.raycaster.setFromCamera(mouse, this.camera);
    let intersects = this.raycaster.intersectObjects(this.scene.children, true);
  }

得到的intersects可能有多个，根据场景中的物体深度排序，但是有时候会出现两个物体重叠的时候，可能我们需要使用renderOrder来将两个物体进行先后渲染，比如物体A和物体B，假设物体B的renderOrder为2，物体A的renderOrder为1，那么我们会先看到物体B，假设渲染代码如下：

  cubeA.material.depthTest = false;
  cubeA.renderOrder = 1;
  scene.add(cubeA);
  cubeB.material.depthTest = false;
  cubeB.renderOrder = 2;
  scene.add(cubeB);

以上代码物体B的renderOrder虽然比物体A的大，但是后加入场景，因此raycaster射线击中反馈的数组中还是按照正常的场景进行深度计算，而与renderOrder顺序无关。那么有一种办法可以解决你想用raycaster拾取到renderOrder最大的重叠物体，很简单，将拾取到的物体数组按照renderOrder排个序，然后取intersects[0]即可。