Issue with combining physics body with imported model .glb file?

Questions
, ,
1

I have imported a car model as .glb file, and I have created a physics body using CanonJS. When merging these two, the position does not become correct. Model and physics body are completely different directions. The physics body will always be on the x axis, and the model will be on the z axis. I have tried changing the position of the model in Blender. But the issue has not been solved. sharing the code that I have done.

Variables are declared globally.
Below code for getting car model using loader.

const loader = new GLTFLoader();
  loader.load(
    objectURL.href,
    function (gltf) {
      speederMesh = gltf.scene;
      speederMesh.scale.set(1, 1, 1);

      modelBody = speederMesh.getObjectByName("NormalCar1");
      // Get tire meshes from the loaded model
      frontLeftTire = speederMesh.getObjectByName("NormalCar1_FrontLeftWheel");
      frontRightTire = speederMesh.getObjectByName(
        "NormalCar1_FrontRightWheel"
      );
      backRightTire = speederMesh.getObjectByName("NormalCar1_BackRightWheel");
      backLeftTire = speederMesh.getObjectByName("NormalCar1_BackLeftWheel");

      scene.add(speederMesh);
      createCarPhysics(); // Create physics bodies for car parts

    },
    undefined,
    function (error) {
      console.error("Error loading GLB file:", error);
    }
  );

Creating physics

function createCarPhysics() {
  carBody = new CANNON.Body({
    mass: 50,
    position: new CANNON.Vec3(0, 6, 0),
    shape: new CANNON.Box(new CANNON.Vec3(2, 0.5, 1)),
  });

  vehicle = new CANNON.RigidVehicle({
    chassisBody: carBody,
  });
  const mass = 1;
  const axisWidth = 5;

  const wheelShape = new CANNON.Sphere(0.25);
  const wheelMaterial = new CANNON.Material("wheel");
  const down = new CANNON.Vec3(0, -1, 0);

  wheelBody1 = new CANNON.Body({
    mass,
    material: wheelMaterial,
  });
  wheelBody1.addShape(wheelShape);
  wheelBody1.angularDamping = 0.4;
  vehicle.addWheel({
    body: wheelBody1,
    position: new CANNON.Vec3(-1.2, -0.5, 0.7),
    axis: new CANNON.Vec3(0, 0, 1),
    direction: down,
  });

  wheelBody2 = new CANNON.Body({
    mass,
    material: wheelMaterial,
  });
  wheelBody2.addShape(wheelShape);
  wheelBody2.angularDamping = 0.4;
  vehicle.addWheel({
    body: wheelBody2,
    position: new CANNON.Vec3(-1.2, -0.5, -0.7),
    axis: new CANNON.Vec3(0, 0, 1),
    direction: down,
  });
  wheelBody3 = new CANNON.Body({
    mass,
    material: wheelMaterial,
  });
  wheelBody3.addShape(wheelShape);
  wheelBody3.angularDamping = 0.4;
  vehicle.addWheel({
    body: wheelBody3,
    position: new CANNON.Vec3(1.2, -0.5, 0.7),
    axis: new CANNON.Vec3(0, 0, 1),
    direction: down,
  });
  wheelBody4 = new CANNON.Body({
    mass,
    material: wheelMaterial,
  });
  wheelBody4.addShape(wheelShape);
  wheelBody4.angularDamping = 0.4;
  vehicle.addWheel({
    body: wheelBody4,
    position: new CANNON.Vec3(1.2, -0.5, -0.7),
    axis: new CANNON.Vec3(0, 0, 1),
    direction: down,
  });

  vehicle.addToWorld(world);
}

Animate function

function animate() {
  cannonDebugger.update();
  controls.update(); 
  world.step(timeStep); // step the stimulation
  if (modelBody && carBody) {
    modelBody.position.copy(carBody.position);
    frontLeftTire.position.copy(wheelBody1.position);
    frontRightTire.position.copy(wheelBody2.position);
    backLeftTire.position.copy(wheelBody3.position);
    backRightTire.position.copy(wheelBody4.position);

    modelBody.quaternion.copy(carBody.quaternion);
    frontLeftTire.quaternion.copy(wheelBody1.quaternion);
    frontRightTire.quaternion.copy(wheelBody2.quaternion);
    backLeftTire.quaternion.copy(wheelBody3.quaternion);
    backRightTire.quaternion.copy(wheelBody4.quaternion);
  } else {
    console.log("cant find model");
  }

  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
2

See this - especially note in point number 2. Cannon uses world coordinates, your wheels all use local coordinates.

That being said - make sure all transforms are applied in Blender so that the exported wheel quaternions are identity quaternions initially.

3

Thanks for replying. I have doubts regarding the transformation in the blender. I have tried changing the axis of the model in Blender. When I loaded that into Three JS, it was perfect with the Cannon Physics body. But when merging with the physics body, i.e., in an animate function, we give position and quaternion copies to the model. After that, the model position changed to the old way.