如何用Three / js和oimo.js抵消模型冲突

debugcn 发表于 Dev

德里克·劳伦斯（Derek Lawrence）

我正在尝试使用Three.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，则碰撞将在脚所在的地方起作用，但边界框的距离不够大。如果我使用的尺寸是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();

德里克·劳伦斯（Derek Lawrence）

好吧，我设法弄清楚了。所以这只是一半的高度，这个值嵌套在shapes成员的内部有点深。

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

    }

所以每个渲染我都需要从主体位置减去halfHeight

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。