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



我正在尝试使用三个对象创建与对象的集合.js导入模型,然后在 Oimo 中创建一个主体来表示它。

我的问题来自模型的中心与对象的中心无关。因此,当我使边界框变大时,脚下的碰撞是不正确的。有没有一种简单的方法可以通过代码甚至编辑模型来实现这一点(建模不是我的专业领域(。

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 的大小,那么 collsion 适用于脚的位置,但边界框不够大。如果我使用 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();

好的,我设法弄清楚了。所以它只是半高,这个值存在于形状成员的深处。

    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 );
    }

所以每次渲染我需要从主体位置减去半身高

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

最新更新