使用自定义缓冲区几何体时，rayCaster 相交返回错误的网格

Question

这是我用于创建网格的代码：

const depth = 0.1;
const width = 0.017;
for (let i = 0; i < 10; i++) {
  const geometry = new THREE.BufferGeometry();
  const v1 = [-0.075 + i * width, 0.06, 0];
  const v2 = [-0.075, 0.06, -depth];
  const v3 = [
    -0.075 + (i + 1) * width,
    0.06,
    -depth,
  ];
  const v4 = [
    -0.075 + (i + 1) * width,
    0.06,
    0,
  ];

  const v5 = [v1[0], 0.15, v1[2]];
  const v6 = [v2[0], 0.15, v2[2]];
  const v7 = [v3[0], 0.15, v3[2]];
  const v8 = [v4[0], 0.15, v4[2]];

  const vertices = new Float32Array([
    //bottom
    ...v1,
    ...v2,
    ...v3,

    ...v3,
    ...v4,
    ...v1,

    //top
    ...v5,
    ...v6,
    ...v7,

    ...v7,
    ...v8,
    ...v5,

    //north
    ...v1,
    ...v4,
    ...v5,

    ...v4,
    ...v5,
    ...v8,

    //east
    ...v1,
    ...v2,
    ...v5,

    ...v5,
    ...v6,
    ...v2,

    //south
    ...v2,
    ...v3,
    ...v6,

    ...v6,
    ...v7,
    ...v3,

    //west
    ...v3,
    ...v4,
    ...v7,

    ...v7,
    ...v8,
    ...v4,
  ]);

  geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(vertices, 3)
  );

  const material =
    new THREE.MeshBasicMaterial({
      color: 0xff0000,
      side: 2,
      transparent: true,
      opacity: 0,
    });
  const mesh = new THREE.Mesh(
    geometry,
    material
  );
  const box = new THREE.BoxHelper(
    mesh,
    0xff0000
  );
  console.log(box);

  scene.add(mesh);
  // scene.add(box);
  meshes.push(mesh);
  boxes.push(box);
  console.log(mesh.id, box.id);
}

这是最终的输出： 当使用pointermove或mousemove事件并将鼠标悬停在同一个框上时，控制台会打印不同的id！！
这件事有什么解释吗？？

  window.addEventListener("pointermove", () => {
    const intersections =
      raycaster.intersectObjects(meshes, true);
    if (intersections.length > 0) {
      const object = intersections[0];
      for (const element of intersections) {
        element.object.material.opacity = 0;
      }

      console.log(object.object.id);
    }
  });

我正在尝试打开光线投射相交的盒子的材质不透明度。

Answer 1

您需要获取屏幕上的鼠标位置并从此时开始设置Raycast。

用于设定位置使用

raycaster.setFromCamera(new Vector2(canvasX, canvasY), camera);

要获得正确的位置，请使用事件信息并像这样获得位置。

private getCanvasRelativePosition(event: MouseEvent) {
    const canvas = event.target as HTMLCanvasElement;
    const rect = canvas.getBoundingClientRect();
    return {
      x: (event.clientX - rect.left) * canvas.width / rect.width,
      y: (event.clientY - rect.top) * canvas.height / rect.height,
    };
 }

您必须在调用 raycaster.intersectObjects(meshes, true); 之前执行此操作