javascript - three.js 中的碰撞墙

Question

我正在用 three.js 创建一个游戏。我是这个领域的新手，但我已经阅读了很多碰撞文档。 我使用光线转换在立方体中包含的船和立方体中包含的岛屿之间进行碰撞。我试图通过这种方式解决问题。

collision2 = false;

    var originPoint = MovingCube.position.clone();
    clearText();
    for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++)
        {       
            var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
            var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
            var directionVector = globalVertex.sub( MovingCube.position );

            var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
            var collisionResults = ray.intersectObjects( collidableMeshList );
            if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) {
                appendText(" Hit "),
                collision2 = true;
            }
}

    if ( keyboard.pressed("W") ){
        obj.translateZ( moveDistance ),
    if (collision2==true){
        obj.translateZ( -moveDistance*4 ),
        }
    }
    if ( keyboard.pressed("S") ){
        obj.translateZ( - moveDistance ),;
    if (collision2==true){
        obj.translateZ( moveDistance*4 ),
        }
    }
    if ( keyboard.pressed("A") ){
        obj.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle),
    if (collision2==true){
        obj.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle*3),
        }
    }
    if ( keyboard.pressed("D") ){
        obj.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle),
    if (collision2==true){
        obj.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle*3),
        }
    }    

乘以 3“moveDistance”和“rotateAngle”，以免在碰撞过程中 raycat 发射的射线使我的船坠毁。它经常有效，但有时船会卡住或进入岛屿。我考虑过当船与基于立方体的面的岛相撞时将船移动几个像素。示例:船在正 X 轴上与立方体的面发生碰撞，从立方体位置减去像素以使船移开。但我不知道该怎么做，这对我来说是一个很好的解决方案。我该如何解决与墙壁碰撞的问题？(我现在不想使用任何物理引擎)感谢那些愿意帮助我的人!

编辑:
我想指出立方体(岛)的哪一侧与船相撞。如果面朝向 X 轴(正向)，则将船向后移动 40 像素(obj.position = + 40)，这适用于每个面。所以你永远不能让船进入立方体。我在看这个我认为可能有用的例子，但我还不知道如何解决它。
https://stemkoski.github.io/Three.js/Mouse-Click.html

这是我的包含船的立方体。

var mats2 = [];

    var cubeGeometry = new THREE.CubeGeometry(25,135,121,10,10,10);
    for (var i = 0; i < 6; i ++) {
    mats2.push(new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:true } ));

}
    MovingCube = new THREE.Mesh( cubeGeometry, mats2 );
    scene.add( MovingCube );
    collidableMeshList0.push(MovingCube);

Answer 1

我想我找到了一个很好的解决方案。
每次发生碰撞时，都可以知道受影响的面孔。使用.face.normal。例如:如果碰撞面是面向 -x 轴的面，您将拥有:x: -1, y: 0, z: 0。如果碰撞面是面向 + x 轴的面，您将拥有:x: +1, y: 0, z: 0。其他轴同理。所以我通过以下方式解决了。现在船不再卡在墙上了!

var originPoint = MovingCube.position.clone();
clearText();
for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++)
    {       
        var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
        var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
        var directionVector = globalVertex.sub( MovingCube.position );

        var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
         collisionResults1 = ray.intersectObjects( collidableMeshList );
        if ( collisionResults1.length > 0 && collisionResults1[0].distance < directionVector.length() ) {
            appendText(" Hit "),
            faccia = collisionResults1[0].face.normal;
            if (faccia.x <=-0.9 ){
                obj.position.x = originPoint.x -30,
            }
            if (faccia.x >=0.9 ){
                obj.position.x = originPoint.x +30,
            }
            if (faccia.z <=-0.9 ){,
                obj.position.z = originPoint.z -30,
            }
            if (faccia.z >=0.9 ){
                obj.position.z = originPoint.z +30,
            }