javascript - 使用 THREE.Raycaster 进行碰撞检测时遇到奇怪的情况 (r68)

Question

到目前为止，我一直在使用 THREE.Raycaster 成功测试游戏引擎中许多内容的碰撞，它非常棒，而且运行良好。

但是，最近我遇到了一些很奇怪的事情，我似乎无法弄清楚。从我的 Angular 来看，我的逻辑和代码是合理的，但预期的结果不正确。也许我只是错过了一些明显的东西，所以我想我应该寻求一些帮助。

我从一组网格体顶部的中心以圆弧方式逐个转换光线。这些网格体都是父级 Object3D 的子级，目标是测试原始网格体和其他也是父级子级的网格体之间的碰撞。为了测试我的光线，我使用了 THREE.ArrowHelper。

这是我的代码结果的图像 - /image/DjW0f.jpg

在此图像中，ArrowHelper 对象的位置(原点:方向)正是我想要的。但是，是的，这张图片有问题，生成此图片的代码是:

var degree = Math.PI / 16,
    tiles = this.tilesContainer.children,
    tilesNum = tiles.length,
    raycaster = new THREE.Raycaster(),
    rayDirections, rayDirectionsNum, rayOrigin, rayDirection, collisions,
    tile, i, j, k;

for (i = 0; i < tilesNum; i++) {
    tile = tiles[i];
    rayOrigin = new THREE.Vector3(
        tile.position.x,
        tile.geometry.boundingBox.max.y,
        tile.position.z
    );
    rayDirections = [];

    for (j = 0; j < Math.PI * 2; j += degree) {
        rayDirections.push(new THREE.Vector3(Math.sin(j), 0, Math.cos(j)).normalize());
    }

    rayDirectionsNum = rayDirections.length;

    for (k = 0; k < rayDirectionsNum; k++) {
        rayDirection = rayDirections[k];

        raycaster.set(rayOrigin, rayDirection);

        collisions = raycaster.intersectObjects(tiles);

        this.testRay(rayOrigin, rayDirection, collisions);
    }
}

testRay 方法如下所示:

testRay: function (origin, direction, collisions) {
    var arrowHelper = new THREE.ArrowHelper(
        direction,
        origin,
        1,
        (collisions.length === 0) ? 0xFF0000 : 0x0000FF
    );

    this.scene.add(arrowHelper);
}

现在，显然这张图片有些不对劲。与其他网格碰撞的光线应为蓝色，而不碰撞的光线应为红色。从这张图像中可以清楚地看出，有些东西完全不正常，当我检查碰撞时，我得到了一些非常不正常的结果。对于图像中显示为蓝色的许多光线，我遇到了大量的碰撞，有时单条光线发生 30 次碰撞，但其他光线则没有发生任何碰撞，即使它们紧邻其他图 block 。

我就是不知道它可能是什么。怎么会有那么多本应是蓝色的光线却变成了红色？关卡边缘的图 block 发出的光线如何与不存在的图 block 发生蓝色碰撞？

对于这个问题我真的很摸不着头脑(读:反复敲打我的头)，任何帮助将不胜感激!

Answer 1

该解决方案实际上位于此代码之外，并且至少我不相信与过时的 r68 版本相关。

制作图 block 网格时，我需要为其设置三个属性

tileMesh.matrixAutoUpdate = false;
tileMesh.updateMatrix();
tileMesh.updateMatrixWorld(); // this is new

我正在做前两个，但不是最后一个。为什么这是必要的，我不知道，这对我来说似乎有点奇怪，但这就是解决我的问题的原因。我在场景中有一个 AxisHelper ，如果您查看原始图像，您会注意到所有蓝色的 ArrowHelper 对象实际上都指向 AxisHelper。这真的很奇怪，因为 AxisHelper 被添加到场景中，而不是添加到tilesContainer 中。将 ArrowHelper 对象添加到 tilesContainer 没有帮助。

渲染场景的过程在将 AxisHelper 添加到场景之前以及初始渲染发生之前运行光线转换器代码。如果我在添加 AxisHelper 后移动 raycaster 代码调用，问题也得到解决，但这是一个 hacky 解决方案。

因此，真正的解决方法是将 .updateMatrixWorld() 添加到图 block 中。现在的结果看起来像这样 /image/1HfA0.jpg ，这是正确的(ArrowHelper 对象的长度已缩短，因此它们不会重叠)。

非常感谢Manthrax感谢他在这件事上的帮助。