Small favour is required. Following is my code where I import gltf model and attach cannon-es vehicle raycaster. Some how my car model is lifted above the surface and I am unable to fix it. Kindly give some advice with code correction. Favor will be appreciated.
new GLTFLoader().load( './assets/media/models/car.gltf', function ( gltf ) {
object = gltf.scene;
object.position.set(0,0,0);
scene.add(object);
// push wheels into array
wheels.push(
object.getObjectByName( 'wheel_LB' ), // gltf left back tyre
object.getObjectByName( 'wheel_RB' ), // gltf right back tyre
object.getObjectByName( 'wheel_LF' ), // gltf left front tyre
object.getObjectByName( 'wheel_RF' ), // gltf right front tyre
);
// vehicle body
chassisBody = new CANNON.Body({ mass: 150, shape: new CANNON.Box(new CANNON.Vec3(1, 0.3, 2)) });
chassisBody.position.set(0, 0, 0);
chassisBody.angularVelocity.set(0, 0, 0); // initial velocity
// parent vehicle object
vehicle = new CANNON.RaycastVehicle({
chassisBody: chassisBody, // car body attached to vehicle
indexRightAxis: 0, // x
indexUpAxis: 1, // y
indexForwardAxis: 2, // z
});
var axlewidth = 1.0; // x distance from center
var axleHeight = 0.0; // y distance from center
options.chassisConnectionPointLocal.set(axlewidth, axleHeight, -1.55); // left back wheel
vehicle.addWheel(options); // add wheel to vehicle
options.chassisConnectionPointLocal.set(-axlewidth, axleHeight, -1.55); // right back wheel
vehicle.addWheel(options); // add wheel to vehicle
options.chassisConnectionPointLocal.set(axlewidth, axleHeight, 1.55); // left front wheel
vehicle.addWheel(options); // add wheel to vehicle
options.chassisConnectionPointLocal.set(-axlewidth, axleHeight, 1.55); // right front wheel
vehicle.addWheel(options); // add wheel to vehicle
vehicle.addToWorld(world); // add vehicle to world
// car wheels
vehicle.wheelInfos.forEach(function (wheel, i) {
var shape = new CANNON.Cylinder(wheel.radius, wheel.radius, wheel.radius / 2, 20);
var body = new CANNON.Body({ mass: 0, material: wheelMaterial });
body.type = CANNON.Body.KINEMATIC;
body.collisionFilterGroup = 0;
var quaternion = new CANNON.Quaternion();//.setFromEuler(-Math.PI / 2, 0, 0);
quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), Math.PI / 2);
body.addShape(shape, new CANNON.Vec3(), quaternion);
wheelBodies.push(body);
wheels[i].scale.set(2.55,2.55,2.55);
wheelVisuals.push(wheels[i]);
scene.add(wheels[i]);
});
// update the wheels to match the physics
world.addEventListener('postStep', function () {
for (var i = 0; i < vehicle.wheelInfos.length; i++) {
vehicle.updateWheelTransform(i);
var transform = vehicle.wheelInfos[i].worldTransform;
// update wheel physics
wheelBodies[i].position.copy(transform.position);
wheelBodies[i].quaternion.copy(transform.quaternion);
wheelVisuals[i].position.copy(transform.position);
wheelVisuals[i].quaternion.copy(transform.quaternion);
}
});
also when i press break after moving. car lift it self on front wheel
break code
function navigate(e) {
if (e.type != 'keydown' && e.type != 'keyup') return;
var keyup = e.type == 'keyup';
var engineForce = 1000, maxSteerVal = 0.5, brakeForce = 1000;
switch (e.keyCode) {
case 32: // space
vehicle.setBrake(keyup ? 0 : brakeForce, 0);
vehicle.setBrake(keyup ? 0 : brakeForce, 1);
vehicle.setBrake(keyup ? 0 : brakeForce, 2);
vehicle.setBrake(keyup ? 0 : brakeForce, 3);
break
case 38: // forward
vehicle.applyEngineForce(keyup ? 0 : -engineForce, 2);
vehicle.applyEngineForce(keyup ? 0 : -engineForce, 3);
break;
case 40: // backward
vehicle.applyEngineForce(keyup ? 0 : engineForce, 2);
vehicle.applyEngineForce(keyup ? 0 : engineForce, 3);
break;
case 39: // right
vehicle.setSteeringValue(keyup ? 0 : -maxSteerVal, 2);
vehicle.setSteeringValue(keyup ? 0 : -maxSteerVal, 3);
break;
case 37: // left
vehicle.setSteeringValue(keyup ? 0 : maxSteerVal, 2);
vehicle.setSteeringValue(keyup ? 0 : maxSteerVal, 3);
break;
}
}