Question

当我尝试在用cannon.js创建的平台之间进行碰撞时，另一个框...碰撞取决于我放置此框的位置。有时盒子会经过平台。

然而，如果我在这个平台和一个球体之间发生碰撞，它就会完美地运行。

我的猜测是，为什么会发生这种情况？最重要的是......我能做些什么来解决它？

请原谅我的错误写错...我的英语水平不是很好。这是代码，提前谢谢：

<!DOCTYPE html>
<html>
<head>
    <title>pruebas</title>
    <style>canvas { width: 100%; height: 100% }
    body {margin:0px; padding: 0px}
    </style>
    <script src="JS/ThreeJS/three.js"></script>
    <script src="JS/cannon.js"></script>
</head>
<body>
<script>

    //************************************** FISICA
    var world = new CANNON.World();
    world.gravity.set(0,-50,0);
    world.broadphase = new CANNON.NaiveBroadphase();



    //*************************************** RENDERER
    var scene = new THREE.Scene();
    var renderer = new THREE.WebGLRenderer( { antialias: true } );
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor("#000000");
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;



    //**************************************** LIGHT
    var light = new THREE.SpotLight("white");
    light.position.set(-180,100,-90);
    light.castShadow = true;
    light.shadowDarkness = 1;
    light.intensity = 3;
    scene.add(light);




    //****************************************** PLATFORMS
    //plane_fisic
    var groundShape = new CANNON.Plane();
    var groundBody = new CANNON.RigidBody(0,groundShape);
    groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2);
    world.add(groundBody);
    //plane_mesh
    var geometry = new THREE.PlaneGeometry( 300, 300, 50, 50 );
    geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
    var material = new THREE.MeshLambertMaterial( { color: 0xdddddd } );
    var plano = new THREE.Mesh( geometry, material );
    plano.castShadow = true;
    plano.receiveShadow = true;
    scene.add(plano);

    //box_fisic
    var forma = new CANNON.Box(new CANNON.Vec3(80,5,50));
    var mass = 0;
    var alma_table = new CANNON.RigidBody(mass,forma);
    alma_table.position.y = 35;
    alma_table.useQuaternion = true;
    world.add(alma_table);

    //box_mesh
    var floorMaterial = new THREE.MeshPhongMaterial();
    var tableGeometry = new THREE.CubeGeometry(160,10,100);
    var table = new THREE.Mesh(tableGeometry,floorMaterial);
    table.castShadow = true;
    table.receiveShadow = true;
    table.ambientLightColor = true;
    scene.add(table);



    //************************************** OBJETS
    //BOX
    //fisic
    var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
    var mass = 2;
    var box_alma = new CANNON.RigidBody(mass,forma);
    box_alma.position.y = 80;
    box_alma.position.x = 0;
    box_alma.position.z = 0;
    box_alma.useQuaternion = true;
    world.add(box_alma);

    //mesh
    var floorMaterial = new THREE.MeshPhongMaterial();
    var tableGeometry =new THREE.CubeGeometry(16,16,16);
    var box = new THREE.Mesh(tableGeometry,floorMaterial);
    box.castShadow = true;
    box.receiveShadow = true;
    box.ambientLightColor = true;
    scene.add(box);

    //BOX2
    //fisic
    var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
    var mass = 2;
    var box_alma2 = new CANNON.RigidBody(mass,forma);
    box_alma2.position.y = 80;
    box_alma2.position.x = -40;
    box_alma2.position.z = +20;
    box_alma2.useQuaternion = true;
    world.add(box_alma2);

    //mesh
    var floorMaterial = new THREE.MeshPhongMaterial();
    var tableGeometry =new THREE.CubeGeometry(16,16,16);
    var box2 = new THREE.Mesh(tableGeometry,floorMaterial);
    box2.castShadow = true;
    box2.receiveShadow = true;
    box2.ambientLightColor = true;
    scene.add(box2);

    //BOX3
    //fisic
    var forma = new CANNON.Box(new CANNON.Vec3(8,8,8));
    var mass = 2;
    var box_alma3 = new CANNON.RigidBody(mass,forma);
    box_alma3.position.y = 80;
    box_alma3.position.x = 50;
    box_alma3.position.z = 0;
    box_alma3.useQuaternion = true;
    world.add(box_alma3);

    //mesh
    var floorMaterial = new THREE.MeshPhongMaterial();
    var tableGeometry =new THREE.CubeGeometry(16,16,16);
    var box3 = new THREE.Mesh(tableGeometry,floorMaterial);
    box3.castShadow = true;
    box3.receiveShadow = true;
    box3.ambientLightColor = true;
    scene.add(box3);



    //****************************************************** CÁMARA
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight, 0.1, 150000);
    camera.position.z =300;
    camera.position.y=130;
    camera.position.x=0;
    camera.lookAt(scene.position)



    update = function(){
        world.step(1/60);
       alma_table.position.copy(table.position);
       alma_table.quaternion.copy(table.quaternion);

       box_alma2.position.copy(box2.position);
       box_alma2.quaternion.copy(box2.quaternion);

       box_alma.position.copy(box.position);
       box_alma.quaternion.copy(box.quaternion);

        box_alma3.position.copy(box3.position);
        box_alma3.quaternion.copy(box3.quaternion);
    }




    var loop = function () {
        requestAnimationFrame(loop);
        renderer.render(scene,camera);
        update();
    }
    loop();
</script>
</body>
</html>

Answer 1

尝试使用Cannon.js的最新开发版本。 Download it here

如何在cannon.js中的两个立方体之间进行碰撞？

1 个答案: