如何抵消模型与三个/js 和 oimo.js 的碰撞

Question

我正在尝试使用 three.js 导入 model 然后在 Oimo 中创建一个主体来表示它，从而与 object 创建冲突。

我的问题来自 model 的中心与 object 的中心无关。 因此，当我使边界框变大时，脚部的碰撞是不正确的。 有没有一种简单的方法可以通过代码甚至编辑 model 来完成此操作（建模不是我的专业领域）。

for ( let i = 0; i < 15; i++ ) {
    loader.load( model, function ( gltf ) {

        let x = startValue += 1;
        let sceneModel = gltf.scene;

        gltf.scene.position.set( x, 20, 0 );
        scene.add( gltf.scene );

        let sizeX = 1;
        let sizeY = 10;
        let sizeZ = 1;

        var body = world.add( {
            type: 'box', // type of shape : sphere, box, cylinder 
            size: [ sizeX, sizeY, sizeZ ], // size of shape
            pos: [ x, 20, 0 ], // start position in degree
            rot: [ 0, 0, 0 ], // start rotation in degrqqee
            move: true, // dynamic or statique
            density: 1,
            friction: 0.2,
            restitution: 0.2,
            belongsTo: 1, // The bits of the collision groups to which the shape belongs.
            collidesWith: 1 // The bits of the collision groups with which the shape collides.
        } );
        models.push( gltf.scene )
        bodies.push( body )


        let geometry = new BoxGeometry( sizeX, sizeY, sizeZ );
        let material = new MeshLambertMaterial( { color: 0x00ff00, } );

        let cube = new Mesh( geometry, material );
        cubes.push( cube );
        cube.position.set( x, 20, 0 );
        scene.add( cube );

        let animations = gltf.animations;
        var mix = new AnimationMixer( sceneModel )
        mixer2.push( mix );

        let idleAction2 = mix.clipAction( animations[ 0 ] );
        idleAction2.play();
    }, undefined, function ( error ) {

        console.error( error );

    } );
}

如果我将 y 设置为 0.1 的大小，那么碰撞适用于脚的位置，但边界框不够大。 如果我使用 1.8 的尺寸，它的高度是正确的，但装置不会再接触地面。

我的更新

var animate = function () {
    requestAnimationFrame( animate );

    let deltaTime = clock.getDelta();

    if ( mixer2 ) {
        mixer2.forEach( mix => {
            mix.update( deltaTime );
        } );
    }
    if ( world ) {
        world.step();
        bodies.forEach( ( body, index ) => {
            models[ index ].position.copy( body.getPosition() );
            models[ index ].quaternion.copy( body.getQuaternion() );

            cubes[ index ].position.copy( body.getPosition() );
            cubes[ index ].quaternion.copy( body.getQuaternion() );
        } )
    }
    renderer.render( scene, camera );
};

animate();

Answer 1

好吧，我设法弄清楚了。 所以它只是半高，这个值嵌套在形状成员内部的深处。

    protected render(): void {
        requestAnimationFrame( this.render.bind( this ) );

        let deltaTime = this.clock.getDelta();
        this.world.step();

        this.physicsBodies.forEach( ( data: { body: RigidBody, object: GameModel, cube?: Mesh }, index ) => {

            data.object.update( deltaTime );

            if ( data.object.isDirty ) {
                data.body.position.copy( data.object.getDisplayObject().position );
                data.object.isDirty = false;
            }
            data.object.getDisplayObject().position.copy( data.body.getPosition() );
            data.object.getDisplayObject().position.y -= data.body.shapes.halfHeight;

            let bodyQuaternion = data.body.getQuaternion();
            data.object.getDisplayObject().quaternion.set(
                bodyQuaternion.x,
                bodyQuaternion.y,
                bodyQuaternion.z,
                bodyQuaternion.w
            );
            data.object.updateMixer( deltaTime );
        } );

        this.nonPhysicsBodies.forEach( ( model: GameModel ) => {
            model.updateMixer( deltaTime );
        } );

        this.renderer.render( this.scene, this.camera );

    }

所以每次渲染我需要从身体 position 中减去 halfHeight

data.object.getDisplayObject().position.y -= data.body.shapes.halfHeight;