I am currently working on implementing collision with an object using three.js by importing a model and then creating a body in Oimo to represent it.
My problem arises from the fact that the center of the model does not align with the center of the object. This discrepancy results in inaccurate collision detection at the feet when I enlarge my bounding box. Is there a straightforward solution to this issue through code or perhaps by adjusting the model itself (given that modeling is not within my expertise)?
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', // shape type: sphere, box, cylinder
size: [ sizeX, sizeY, sizeZ ], // shape size
pos: [ x, 20, 0 ], // initial position
rot: [ 0, 0, 0 ], // initial rotation
move: true, // dynamic or static
density: 1,
friction: 0.2,
restitution: 0.2,
belongsTo: 1, // Collision group belonging bits.
collidesWith: 1 // Collision group bits to collide with.
} );
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 );
} );
}
If I set y to 0.1 for the size, the collision works correctly at the feet but the bounding box is too small. Using a size of 1.8 gives the right height, but the unit doesn't touch the ground anymore.
My update
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();