Create collision inside track

Phaser 3
1

Hello, I want create some game with f1, so I download track example from phaser webside and I don’t know how can I make collision inside track, I mean car cannot leave track when user drive a car. Can you help me please?
Below you can see a example code.

let x=500;

let y =500;

let f_car =0;

class Example extends Phaser.Scene

{

constructor ()

{

    super();

}

preload ()

{

    this.load.spritesheet("f1_car","assets/car_spritesheet0.png",{frameWidth:98,frameHeight:72});

    this.load.setPath('assets_racing/racing/');

   

    this.load.obj('roadStart', 'roadStartPositions.obj', 'roadStartPositions.mtl');

    this.load.obj('roadEnd', 'roadEnd.obj', 'roadEnd.mtl');

    this.load.obj('roadCrossing', 'roadCrossing.obj', 'roadCrossing.mtl');

    this.load.obj('roadCurved', 'roadCurved.obj', 'roadCurved.mtl');

    this.load.obj('roadStraight', 'roadStraight.obj', 'roadStraight.mtl');

    this.load.obj('roadStraightLong', 'roadStraightLong.obj', 'roadStraightLong.mtl');

    this.load.obj('roadStraightArrow', 'roadStraightArrow.obj', 'roadStraightArrow.mtl');

    this.load.obj('roadSplitLarge', 'roadSplitLarge.obj', 'roadSplitLarge.mtl');

    this.load.obj('roadCornerLarge', 'roadCornerLarge.obj', 'roadCornerLarge.mtl');

    this.load.obj('roadCornerLargeBorder', 'roadCornerLargeBorder.obj', 'roadCornerLargeBorder.mtl');

    this.load.obj('roadCornerLargeBorderInner', 'roadCornerLargeBorderInner.obj', 'roadCornerLargeBorderInner.mtl');

}

create ()

{

    const track = this.add.mesh(400, 300);

    const rot90 = Phaser.Math.DegToRad(90);

    const rot180 = Phaser.Math.DegToRad(180);

    f_car = this.physics.add.sprite(x,y,"f1_car");

   

    //  Add road pieces

    track.addVerticesFromObj('roadStart', 1, 0, 0, 0, rot90, rot180);

    track.addVerticesFromObj('roadStraight', 1, 0, 2, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLarge', 1, 0, 3, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 0, 3, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 0, 3, 0, rot90, rot180);

    track.addVerticesFromObj('roadStraightLong', 1, 4, 4, 0, rot90, rot180 + rot90);

    track.addVerticesFromObj('roadCornerLarge', 1, 6, 6, 0, rot90, 0);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 6, 6, 0, rot90, 0);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 6, 6, 0, rot90, 0);

    track.addVerticesFromObj('roadStraightArrow', 1, 5, 6, 0, rot90, rot180);

    track.addVerticesFromObj('roadCurved', 1, 5, 7, 0, rot90, rot180);

    track.addVerticesFromObj('roadCurved', 1, 4.5, 9, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLarge', 1, 4, 11, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 4, 11, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 4, 11, 0, rot90, rot180);

    track.addVerticesFromObj('roadStraightLong', 1, 8, 12, 0, rot90, rot180 + rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 10, 12, 0, rot90, rot180 + rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 12, 12, 0, rot90, rot180 + rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 14, 12, 0, rot90, rot180 + rot90);

    track.addVerticesFromObj('roadCornerLarge', 1, 14, 13, 0, rot90, rot90);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 14, 13, 0, rot90, rot90);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 14, 13, 0, rot90, rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 15, 9, 0, rot90, rot180);

    track.addVerticesFromObj('roadStraightLong', 1, 15, 7, 0, rot90, rot180);

    track.addVerticesFromObj('roadSplitLarge', 1, 16, 7, 0, rot90, rot180 + rot180);

    track.addVerticesFromObj('roadEnd', 1, 14, 5, 0, rot90, -rot90);

    track.addVerticesFromObj('roadCurved', 1, 15.5, 3, 0, rot90, rot180);

    track.addVerticesFromObj('roadStraightLong', 1, 15.5, 1, 0, rot90, rot180);

    track.addVerticesFromObj('roadCornerLarge', 1, 16.5, 1, 0, rot90, 0);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 16.5, 1, 0, rot90, 0);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 16.5, 1, 0, rot90, 0);

    track.addVerticesFromObj('roadStraightLong', 1, 12.5, 0, 0, rot90, rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 10.5, 0, 0, rot90, rot90);

    track.addVerticesFromObj('roadCurved', 1, 8.5, -0.5, 0, rot90, rot90);

    track.addVerticesFromObj('roadCurved', 1, 6.5, -1, 0, rot90, rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 4.5, -1, 0, rot90, rot90);

    track.addVerticesFromObj('roadStraightLong', 1, 3, -1, 0, rot90, rot90);

    track.addVerticesFromObj('roadStraightArrow', 1, 3, -2, 0, rot90, -rot90);

    track.addVerticesFromObj('roadCornerLarge', 1, 2, -2, 0, rot90, -rot90);

    track.addVerticesFromObj('roadCornerLargeBorder', 1, 2, -2, 0, rot90, -rot90);

    track.addVerticesFromObj('roadCornerLargeBorderInner', 1, 2, -2, 0, rot90, -rot90);

    //  Zoom the camera

    track.panX(-1);

    track.panY(1.5);

    track.panZ(20);

    this.debug = this.add.graphics();

    this.input.keyboard.on('keydown-D', () => {

        if (track.debugCallback)

        {

            track.setDebug();

        }

        else

        {

            track.setDebug(this.debug);

        }

    });

    const rotateRate = 1;

    const panRate = 1;

    const zoomRate = 4;

    this.input.on('pointermove', pointer => {

        if (!pointer.isDown)

        {

            return;

        }

        if (pointer.event.shiftKey)

        {

            track.modelRotation.y += pointer.velocity.x * (rotateRate / 800);

            track.modelRotation.x += pointer.velocity.y * (rotateRate / 600);

        }

        else

        {

            track.panX(pointer.velocity.x * (panRate / 800));

            track.panY(pointer.velocity.y * (panRate / 600));

        }

    });

    this.input.on('wheel', (pointer, over, deltaX, deltaY, deltaZ) => {

        track.panZ(deltaY * (zoomRate / 600));

    });

    this.track = track;

    this.t = this.add.text(16, 16, '', { font: '16px Courier', fill: '#ffffff' }).setShadow(1, 1, '#000000');

}

update ()

{  

    f_car.setVelocityX(-100);

    this.debug.clear();

    this.debug.lineStyle(1, 0x00ff00);

    this.t.setText([

        'Drag with mouse',

        'Shift + Drag to rotate',

        'Wheel to zoom',

        'D to toggle debug',

        '',

        'Total Faces: ' + this.track.getFaceCount(),

        'Total Rendered: ' + this.track.totalRendered

    ]);

}

}

var config = {

type: Phaser.AUTO,

width: 1300,

height: 1000,

physics: {

    default: 'arcade',

    arcade: {

        gravity: { y: 0 },

        debug: false

    }

},

scene: Example,

};

var game = new Phaser.Game(config);