Question

嘿伙计们我正在尝试制作一个简单的3js和cannon js演示，除了看起来有一个单元关闭之外它已经完成了。 https://www.dropbox.com/s/qqaal0hgq9a506e/Screenshot%202014-10-01%2022.17.47.png?dl=0

function initCannonWorld() {

    world = new CANNON.World();
    world.gravity.set(0,-9.8,0);
    world.broadphase = new CANNON.NaiveBroadphase();
    world.solver.iterations = 10;
}

function addBodyToCannonWorld() {
    shape = new CANNON.Box(new CANNON.Vec3(1,1,1));

    body = new CANNON.Body({
        mass: 5
    });

    body.position.set(0,10,0);

    body.addShape(shape);
    //body.angularVelocity.set(0,10,0);
    //body.angularDamping = 0.5;

    world.addBody(body);
}

function initCannon() {
    initCannonWorld();
    addBodyToCannonWorld();
    addPlaneBodyToWorld();
}

function initThreeScene() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 100 );
    camera.position.z = 25;
    camera.lookAt(new THREE.Vector3(0,0,0));
    scene.add( camera );

    // add orbit around where camera  is targeting is pointing
    oribitalControl = new THREE.OrbitControls(camera);
    // Listen to the change event.
    oribitalControl.addEventListener("change",render);

    // Change to canvas for triangles lines.
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );
}
function addPlaneToWorld() {
    planeGeo = new THREE.BoxGeometry(20,1,20,2,1,2);
    planeMat = new THREE.MeshBasicMaterial({ color: 0x3498db, wireframe:true});
    plane = new THREE.Mesh(planeGeo, planeMat);
    scene.add( plane );

}

function addPlaneBodyToWorld() {
    var planeShape = new CANNON.Box(new CANNON.Vec3(20,1,20));
    // Mass 0 makes a body static.

    planeBody = new CANNON.Body({mass:0});

    planeBody.addShape(planeShape);
    world.addBody(planeBody);
}


function addMeshToWorld() {
    geometry = new THREE.BoxGeometry( 1, 1, 1 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:true} );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
}

function initThree() {
    initThreeScene();
    addMeshToWorld();
    addPlaneToWorld();
}

function run() {
    requestAnimationFrame(run);
    oribitalControl.update();
    updatePhysics();
    render();
}

function updatePhysics() {
    // Step the physics world
    world.step(timeStep);

    mesh.position.copy(body.position);
    mesh.quaternion.copy(body.quaternion);

    plane.position.copy(planeBody.position);
    plane.quaternion.copy(planeBody.quaternion);


}

function render() {
    renderer.render( scene, camera );
}

Answer 1

CANNON.Box将半个范围作为参数，而THREE.BoxGeometry占用完整范围。将Three.js框的尺寸加倍，或将Cannon.js框的尺寸减半，它们将在视觉上匹配。

...
var planeShape = new CANNON.Box(new CANNON.Vec3(20,1,20));
...
planeGeo = new THREE.BoxGeometry(2*20, 2*1, 2*20, 2, 1, 2);
...

Cannonjs和THREE.js一个单位关闭

1 个答案: