javascript - Three.js raycaster.intersectObject() 每次都返回相同的faceIndex

Question

我有一个用 THREE.CanvasRenderer() 渲染的 3D 立方体，我试图根据双击立方体的哪一面来打开特定的网页。但是，无论单击哪个面，都会打开相同的页面。一些黑客调试(我不知道如何使用控制台)显示 intersects[ 0 ].faceIndex 始终为“11”。我怎样才能让它返回立方体最近的面。

这是我的 js 中处理这个问题的部分；

document.addEventListener('dblclick', onDocumentMouseDblClick, false);

function onDocumentMouseDblClick(event) {

    event.preventDefault();

    mouse.x = (event.clientX / renderer.domElement.width) * 2 - 1;
    mouse.y = -(event.clientY / renderer.domElement.height) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    var intersects = raycaster.intersectObject(cube);

    if (intersects.length > 0) {
      if (intersects[0].faceIndex = 1 || 2) {
        window.open("About.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }
      if (intersects[0].faceIndex = 3 || 4) {
        window.open("Mondrian.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }
      if (intersects[0].faceIndex = 5 || 6) {
        window.open("page3.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }
      if (intersects[0].faceIndex = 7 || 8) {
        window.open("page4.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }
      if (intersects[0].faceIndex = 9 || 10) {
        window.open("page5.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }
      if (intersects[0].faceIndex = 11 || 12) {
        window.open("page6.html", "_self")
          //title.innerHTML = intersects[ 0 ].faceIndex;
      }

我首先关注 THREE.js interactive cubes example并阅读 THREE.raycaster documentation表明交叉点应按最近距离排序。我读过一些使用 Vector3 和非投影的 SO 帖子，它们要么不起作用，要么我误解了它们。由于声誉，无法链接它们。

Answer 1

最有可能应该是:

if (intersects[0].faceIndex === 1 || intersects[0].faceIndex === 2) {