I´m working on project in A-frame using aframe-physics-system which exposes cannon.js to a-frame. I want to make raycast vehicle usable in a-frame. I have the part of chassis working but the wheel visuals are rolling in wrong direction.
<a-box position="0 1.25 -3.5" color="#EF2D5E" width="2" height="0.5" depth="3" body="mass: 500" vehicle>
</a-box>
var vehicle = new CANNON.RaycastVehicle({
chassisBody: this.el.body,
indexForwardAxis: 2,
indexRightAxis: 0,
indexUpAxis: 1
});
var wheelBodies = [];
for(var i=0; i<vehicle.wheelInfos.length; i++){
var wheel = vehicle.wheelInfos[i];
var element = document.createElement("a-cylinder");
element.setAttribute("radius", wheel.radius);
element.setAttribute("height", wheel.radius / 2);
element.setAttribute("material", "src", `url(${Wheel})`);
element.setAttribute("static-body", "mass", "1");
this.el.sceneEl.appendChild(element);
wheelBodies.push(element);
}
// Update wheels
this.world.addEventListener('postStep', function(){
for (var i = 0; i < vehicle.wheelInfos.length; i++) {
vehicle.updateWheelTransform(i);
var t = vehicle.wheelInfos[i].worldTransform;
wheelBodies[i].body.position.copy(t.position);
wheelBodies[i].body.quaternion.copy(t.quaternion);
}
});
Position of wheels are good, but when i set quaternion from raycast vehicle they are rolling in other direction than it should be. I found nothing here about a-frame and raycast vehicle.
Do anybody knows why it is happening?
Thank you.
FULL CODE: https://gist.github.com/erikbalog/58170915d29282711dd2c9355dc3c73f