Cannon.js raycast vehicle support in a-frame, wheel visuals bad axis

342 Views Asked by At

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

0

There are 0 best solutions below