Hi everyone,

I’m a beginner in Three.js and coding in general (sorry for my English—I speak French because I’m Belgian!). I’ve been struggling with applying a cylinder collider to a GLB asterisk-shaped model. Although my debug mesh is perfectly aligned with the 3D model, the asterisk falls correctly and bounces but then slowly leans and sinks into the ground. I suspect there is an inconsistency between the physical body (collider) and the actual object, but I can’t figure out why.

Here is my physics setup code:

JAVASCRIPTCopied
createDynamicBody(position, size, options = {}) {
    // Log pour debug initial
    console.log("Création corps dynamique:", { position, size, options });

    // Créer le RigidBodyDesc avec rotation si spécifiée
    const bodyDesc = RAPIER.RigidBodyDesc.dynamic()
        .setTranslation(position.x, position.y, position.z);

    if (options.rotation) {
        bodyDesc.setRotation(options.rotation); // Appliquer la rotation au corps
    }

    const rigidBody = this.world.createRigidBody(bodyDesc);

    // Créer le collider avec les bonnes propriétés
    let colliderDesc;
    if (options.type === 'cylinder') {
        colliderDesc = RAPIER.ColliderDesc.cylinder(
            size.radius, // Rayon du cylindre
            size.height / 2 // Hauteur du cylindre (divisée par 2)
        )
            .setRestitution(0.3)
            .setFriction(1.0) // Augmenter la friction
            .setDensity(10.0); // Augmenter la densité pour plus de stabilité
    }

    this.world.createCollider(colliderDesc, rigidBody);

    // Ajuster l'inertie pour favoriser une rotation plate
    rigidBody.setAngularDamping(3.0); // Fort amortissement angulaire

    // Log position et rotation initiales
    console.log("RigidBody initial state:", {
        position: rigidBody.translation(),
        rotation: rigidBody.rotation()
    });

    return rigidBody;
}

And here’s how I load and configure the mesh:

JAVASCRIPTCopied
const loader = new GLTFLoader();// Chargement du modèle Asterisk
loader.load(
    './models/asterisk.glb',
    (gltf) => {
        asteriskMesh = gltf.scene;
        asteriskMesh.scale.set(ASTERISK_SCALE, ASTERISK_SCALE, ASTERISK_SCALE * 2);
        const startPos = { x: 10, y: 15, z: -15 };
        asteriskMesh.position.set(startPos.x, startPos.y, startPos.z);
        sceneManager.getScene().add(asteriskMesh);
        asteriskMesh.rotateZ(Math.PI / 4); // Rotation pour l'orientation

        const physicsScale = ASTERISK_SCALE;
        const colliderRadius = physicsScale * 0.4; // Rayon du cylindre
        const colliderHeight = physicsScale * 0.1; // Hauteur du cylindre
        const startRotation = new THREE.Euler(Math.PI / 2, 0, Math.PI / 4);
        const startQuaternion = new THREE.Quaternion().setFromEuler(startRotation);

        asteriskMesh.quaternion.copy(startQuaternion);
        asteriskBody = physicsManager.createDynamicBody(
            startPos,
            {
                radius: colliderRadius,    // Utiliser le même rayon que le debug
                height: colliderHeight
            },
            { 
                type: 'cylinder',
                rotation: startQuaternion
            }
        );

        // Debug visuel ajusté (doit correspondre exactement à la physique)
        const debugGeometry = new THREE.CylinderGeometry(
            colliderRadius,    // Même rayon que la physique
            colliderRadius,    // Même rayon que la physique
            colliderHeight   // Même hauteur que la physique
        );
        const debugMaterial = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: true,
            opacity: 0.5,
            transparent: true
        });
        const debugMesh = new THREE.Mesh(debugGeometry, debugMaterial);
        debugMesh.rotation.x = Math.PI / 2;  // Aligner le debug avec la physique
        asteriskMesh.add(debugMesh);
    }
);

I’ve been searching for a solution for days with help from GPT, Claude, Copilot, and Deepseek, but nothing seems to work. Any suggestions or insights to fix this collider mismatch would be greatly appreciated. Thanks for your help!

TitiPopo