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