Three.js 不同大小的碰撞检测答案

【问题标题】：Three.js collision detection with different sizesThree.js 不同大小的碰撞检测
【发布时间】：2017-06-17 09:40:05
【问题描述】：

我进行了碰撞检测。您可以将对象放置在地板上的光线投射器/鼠标位置。因此，您需要单击“添加对象”按钮，然后您将获得一个跟随鼠标的对象（助手），以查看新对象是否与另一个对象发生碰撞。当你点击你想要的位置时，如果没有碰撞，新对象将被放置到世界中。

当已经放置在世界中的对象与辅助/新对象的大小相同时，我所做的碰撞检测非常有效。

在下一个屏幕截图中，您可以看到一个大对象和一个小（红色）助手。红色表示发生碰撞。当我将鼠标更向右移动时，它会变为绿色。

为什么我的碰撞检测只适用于大小相同的 2 个对象，为什么不适用不同大小的对象？

这是我在 Click 事件中显示大对象的代码：

var geometry = new THREE.BoxGeometry(200, 200, 300);
var bigobject = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    color: 0xFBF5D7,
    opacity: 1
}));
bigobject.position.copy(intersects[0].point);
bigobject.position.y = 100;
objects.push(bigobject);
scene.add(bigobject);

这是我在单击“添加对象”按钮时显示帮助程序的代码：

var geometry = new THREE.BoxGeometry( 50, 50, 100 );
helper = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, opacity: 1 } ) );
helper.name = 'helper';
scene.add( helper );

这是我在 MouseMove 事件中检测碰撞的代码：

if(scene.getObjectByName( 'helper' )) {
    helper.position.copy( intersects[ 0 ].point );
    helper.position.y = 25;

    var helperWidth = helper.geometry.parameters.width;
    var helperLength = helper.geometry.parameters.depth;

    var validpositionObject = true;
    for (var i = 0; i < objects.length; i++) {

        var objectWidth = objects[i].geometry.parameters.width;
        var objectLength = objects[i].geometry.parameters.depth;

        // MIN X
        var helperMinX = helper.position.x;
        var objectMinX = objects[i].position.x;

        // MAX X
        var helperMaxX = helperWidth + helper.position.x;
        var objectMaxX = objectWidth + objects[i].position.x;

        // MIN Z
        var helperMinZ = helper.position.z;
        var objectMinZ = objects[i].position.z;

        // MAX Z
        var helperMaxZ = helperLength + helper.position.z;
        var objectMaxZ = objectLength + objects[i].position.z;

        if (objectMinX <= helperMaxX && objectMaxX >= helperMinX && objectMinZ <= helperMaxZ && objectMaxZ >= helperMinZ) {
            validpositionObject = false;
        }

    }

    if ( validpositionObject === true ) {
        helper.material.color.setHex( 0x00ff00 );
        validposition = true;
    }else{
        helper.material.color.setHex( 0xff0000 );
        validposition = false;
    }

}

当它是一个大物体和一个小物体时，位置出了什么问题..有人可以帮助我朝正确的方向前进吗？非常感谢

【问题讨论】：

我很确定对象是按中心定位的，而不是左上角。 x 碰撞可以通过abs(o1.x - o2.x) < (o1.w + o2.w)/2 确定

标签： javascript three.js collision-detection

【解决方案1】：

使用这个：

function collisonXZ(o1, o2) {
  if (Math.abs(o1.position.x - o2.position.x) > (o1.geometry.parameters.width + o2.geometry.parameters.width) / 2)
    return false;
  if (Math.abs(o1.position.z - o2.position.z) > (o1.geometry.parameters.depth + o2.geometry.parameters.depth) / 2)
    return false;
  return true;
}

var validpositionObject = true;
for (var i = 0; i < objects.length; i++) {
  if (collisionXZ(helper, objects[i])) {
    validpositionObject = false;
    break;
  }
}

【讨论】：