Three.js 碰撞检测问题

Question

我正在制作一个简单的游戏，当你点击一个大平面（地面）时，你可以在 raycaster（鼠标）位置添加对象（立方体）。我不希望对象（立方体）可以相互放置。我做了一个简单的碰撞检测。我知道这不是最好的方法，但这是我理解我在做什么的方式。我是初学者。

在下面的代码中，我检查了两个对象的位置。通过这些位置，我检查它之间的距离。如果距离小于 4098（即 64*64），则将对象添加到场景中。

function onDocumentMouseDown( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( clickObjects );
    var intersects2 = raycaster.intersectObjects( objects );
    if ( intersects.length > 0 ) { // Clicking on the ground?
        if ( intersects2.length > 0 ) { // Clicking on an object?
        }else{
            var geometry = new THREE.BoxGeometry( 64, 64, 64);
            var cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xFBF5D7, opacity: 1 } ) );
            cube.position.copy(intersects[0].point);
            cube.position.y = 30;
            cube.flipSided = true;
            cube.doubleSided = true;
            var validposition = true;
            var i;
            for (i = 0; i < objects.length; i++) {
                var dx = cube.position.x - objects[i].position.x;
                var dy = cube.position.y - objects[i].position.y;
                var dz = cube.position.z - objects[i].position.z;
                var distance = dx*dx+dy*dy+dz*dz;
                if(distance < 4096) {
                    validposition = false;
                }
            }
            if(validposition == true) {
                objects.push(cube);
                scene.add(cube);
            }
        }
    }
}

问题是这只适用于方形对象。任何人都可以帮助我如何思考像 THREE.BoxGeometry( 64, 64, 400) 这样的矩形对象？

Answer 1

我前段时间写了一个C64青蛙游戏的重制版。在那里我必须控制我的青蛙不接触汽车。

var img1_x1 = parseInt(idImg.style.left);
var img1_x2 = img1_x1 + idImg.width - 1;
var img1_y1 = parseInt(idImg.style.top);
var img1_y2 = img1_y1 + idImg.height - 1;

img2_x1 = parseInt(idImg2.style.left);
img2_x2 = img2_x1 + idImg2.width - 1;
img2_y1 = parseInt(idImg2.style.top);
img2_y2 = img2_y1 + idImg2.height - 1;

if (((img2_x1 <= img1_x2 && img1_x2 <= img2_x2) || (img2_x1 <= img1_x1 && img1_x1 <= img2_x2) || (img1_x1 <= img2_x1 && img2_x1 <= img1_x2)) 
    && ((img2_y1 <= img1_y2 && img1_y2 <= img2_y2) || (img2_y1 <= img1_y1 && img1_y1 <= img2_y2) || (img1_y1 <= img2_y1 && img2_y1 <= img1_y2)))
{
    alert('boom');
}

看看我的代码，也许对你有用。我首先计算我的青蛙 (img1) 的位置，然后在我的所有 test-objects 上使用 for-loop（此处未显示）。在这个循环中，我计算了对象 (img2) 的位置，然后我控制了重叠。
您必须将第三维添加到我不需要的条件中。

注意： 对于 img2，我没有在我的 for-loop 中使用 var，我在函数外部声明了它。

我只从我的代码中复制了几个部分并删除了混乱的部分。

Three.js 碰撞检测问题

Three.js collision detection issue

javascript

collision-detection

three.js