如何在Three.js中检测物体相交？实现无相交随机位置物体生成

嘿，针对你要在Three.js里放置20个不相交随机物体的需求，最实用高效的方法是用包围盒（Bounding Box）碰撞检测——毕竟精确的网格相交计算太耗性能，对于批量随机放置的场景，包围盒完全够用。下面给你一步步拆解实现思路和修改后的代码：

核心思路 #

1. 给每个生成的物体计算世界空间下的包围盒，这是Three.js内置的高效碰撞检测基础。
2. 对每个新创建的物体，和所有已经放置好的物体做相交检测；如果相交，就重新生成随机位置，直到找到不重叠的位置为止。

具体代码实现（结合你的现有代码） #

首先你需要维护一个数组来存储已经放置好的物体，然后在加载完OBJ模型后添加碰撞检测逻辑：

// 用来存储已经放置好、不相交的物体
const placedObjects = [];

for (var i = 0; i < 20; i++) {
    const textureLoader = new THREE.TextureLoader();
    const map = textureLoader.load('./models/test_2.png');
    const material = new THREE.MeshPhongMaterial({ map: map });
    const shipMtl = new MTLLoader();
    const loader = new THREE.OBJLoader();

    shipMtl.load('./models/your-model.mtl', (materials) => {
        materials.preload();
        loader.setMaterials(materials);
        loader.load('./models/your-model.obj', (object) => {
            // 给OBJ模型的子网格应用材质（如果模型本身没带材质的话）
            object.traverse((child) => {
                if (child.isMesh) {
                    child.material = material;
                }
            });

            // 循环生成随机位置，直到找到不与已有物体相交的位置
            let isOverlapping = true;
            while (isOverlapping) {
                // 生成随机位置，这里的范围你可以根据自己的场景调整
                const randomX = Math.random() * 100 - 50; // X轴范围-50到50
                const randomY = Math.random() * 20;      // Y轴范围0到20
                const randomZ = Math.random() * 100 - 50; // Z轴范围-50到50
                object.position.set(randomX, randomY, randomZ);

                // 更新物体的世界矩阵，确保包围盒计算的是世界空间坐标
                object.updateMatrixWorld(true);
                // 计算当前物体的整体包围盒
                const currentBox = new THREE.Box3().setFromObject(object);

                // 检查当前物体和所有已放置物体是否相交
                isOverlapping = false;
                for (const placedObj of placedObjects) {
                    const placedBox = new THREE.Box3().setFromObject(placedObj);
                    // 用Three.js内置的方法检测包围盒是否相交
                    if (currentBox.intersectsBox(placedBox)) {
                        isOverlapping = true;
                        break; // 只要和一个物体相交就重新生成位置
                    }
                }
            }

            // 把当前物体加入已放置数组，方便后续检测
            placedObjects.push(object);
            // 最后把物体添加到场景中
            scene.add(object);
        });
    });
}

关键细节说明 #

• 为什么用包围盒？：Box3.intersectsBox()是Three.js原生的高效方法，时间成本极低，20个物体的双重循环完全不会有性能问题。
• 必须更新世界矩阵：每次修改物体位置后，一定要调用updateMatrixWorld(true)，否则setFromObject()计算的还是之前的位置的包围盒，检测会失效。
• OBJ模型的处理：OBJ通常是一个Group，包含多个子Mesh，用setFromObject(object)可以直接计算整个组的包围盒，不用单独处理每个子Mesh。
• 可选优化：如果你的物体是规则球形，也可以用THREE.Sphere代替Box3，调用intersectsSphere()方法，逻辑完全一致。

内容的提问来源于stack exchange，提问作者JohnSmithSB