# Car track

## Recommended Posts

Hello, I'm trying to study babylon. Use "Making a Simple Driven Car" ( https://www.babylonjs-playground.com/#102TBD#33)  and want to add some new functions for this. For example car track. This part of code is not working((( Can anybody give some idea  to help me with this problem? I'm trying  to change "width" parameter of "CreateBox" in the animation loop, but it's not working correctly(

scene.registerAfterRender(function() {
F = engine.getFps();

if(map[" "] && D < 15 ) {
D += 1;
};

if(D > 0.15) {
D -= 0.15;
}
else {
D = 0;
}

distance = D/F;
psi = D/(r * F);

if((map["a"] || map["A"]) && -Math.PI/6 < theta) {
deltaTheta = -Math.PI/252;
theta += deltaTheta;
pivotFI.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
pivotFO.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
if(Math.abs(theta) > 0.00000001) {
NR = A/2 +L/Math.tan(theta);
}
else {
theta = 0;
NR = 0;
}
pivot.translate(BABYLON.Axis.Z, NR - R, BABYLON.Space.LOCAL);
tractorBody.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
R = NR;

};

if((map["d"] || map["D"])  && theta < Math.PI/6) {
deltaTheta = Math.PI/252;
theta += deltaTheta;
pivotFI.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
pivotFO.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
if(Math.abs(theta) > 0.00000001) {
NR = A/2 +L/Math.tan(theta);
}
else {
theta = 0;
NR = 0;
}
pivot.translate(BABYLON.Axis.Z, NR - R, BABYLON.Space.LOCAL);
tractorBody.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
R = NR;

};

if(D > 0) {
phi = D/(R * F);
if(Math.abs(theta) > 0) {
pivot.rotate(BABYLON.Axis.Y, phi, BABYLON.Space.WORLD);
psiRI = D/(r * F);
psiRO = D * (R + A)/(r * F);
psiFI = D * Math.sqrt(R * R + L * L)/(r * F);
psiFO = D * Math.sqrt((R + A) * (R + A) + L * L)/(r * F);

wheelFI.rotate(BABYLON.Axis.Y, psiFI, BABYLON.Space.LOCAL);
wheelFO.rotate(BABYLON.Axis.Y, psiFO, BABYLON.Space.LOCAL);
wheelRI.rotate(BABYLON.Axis.Y, psiRI, BABYLON.Space.LOCAL);
wheelRO.rotate(BABYLON.Axis.Y, psiRO, BABYLON.Space.LOCAL);
}
else {
pivot.translate(BABYLON.Axis.X, -distance, BABYLON.Space.LOCAL);
wheelFI.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelFO.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelRI.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelRO.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
}
//create tractor track
var trailer_track = BABYLON.MeshBuilder.CreateBox("trailer", {height: 0.1, width: (D+D_prev), depth: 15}, scene);
//trailer_track.width += D;
//trailer_track.translate(BABYLON.Axis.X, -distance, BABYLON.Space.LOCAL)
//trailer_track.parent = trailer;
var trailerTrackMaterial = new BABYLON.StandardMaterial("trailer_mat", scene);
trailerTrackMaterial.diffuseColor = new BABYLON.Color3(1, 1, 0);
trailerTrackMaterial.alpha = 0.01;
trailer_track.material = trailerTrackMaterial;
trailer_track.position.y = -2.5;

}
D_prev = D;
});

##### Share on other sites

Hello and welcome!

Would you mind adding your code to a playground so we can help fixing it?

##### Share on other sites

If you have an array of Vector3 positions that define the road path center ("the line your car follows"), you can use ExtrudeShape to add road bed mesh to it.

See the rollercoaster example from Jerome Bousquie:

The roller coaster frame is extruded on the path through the Vector3 positions that the car follows.

I use this technique to create Railroad track for my train simulator 🙂

##### Share on other sites

thaks, but the line my car follows  - it will be the next step for me. Now I want to create some "footprint" on the ground after the car.

##### Share on other sites

Hi @iri and welcome to the forum from me. You could try to build the track using the line 2D snippet http://doc.babylonjs.com/snippets/line2d#line-in-xoz-plane-formed-from-central-path

##### Share on other sites

Hi @JohnK) Yesterday, I used 2D line and it will works. But works only on streight line( Can anyone help me with turning? I don't know how create line when the car turns(

This is a part of my code (green code works when the car moving streight, and red text - is my attempt to create car footprint on the turning):

scene.registerAfterRender(function() {
F = engine.getFps();

if(map[" "] && D < 15 ) {
D += 1;
};

if(D > 0.15) {
D -= 0.15;
}
else {
D = 0;
}

distance = D/F;
psi = D/(r * F);

if((map["a"] || map["A"]) && -Math.PI/6 < theta) {
deltaTheta = -Math.PI/252;
theta += deltaTheta;
pivotFI.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
pivotFO.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
//sphere.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
if(Math.abs(theta) > 0.00000001) {
NR = A/2 +L/Math.tan(theta);
}
else {
theta = 0;
NR = 0;
}
pivot.translate(BABYLON.Axis.Z, NR - R, BABYLON.Space.LOCAL);
tractorBody.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
//sphere.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
R = NR;

};

if((map["d"] || map["D"])  && theta < Math.PI/6) {
deltaTheta = Math.PI/252;
theta += deltaTheta;
pivotFI.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
pivotFO.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
//sphere.rotate(BABYLON.Axis.Y, deltaTheta, BABYLON.Space.LOCAL);
if(Math.abs(theta) > 0.00000001) {
NR = A/2 +L/Math.tan(theta);
}
else {
theta = 0;
NR = 0;
}
pivot.translate(BABYLON.Axis.Z, NR - R, BABYLON.Space.LOCAL);
tractorBody.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
//sphere.translate(BABYLON.Axis.Z, R - NR, BABYLON.Space.LOCAL);
R = NR;

};

if(D > 0) {
phi = D/(R * F);
if(Math.abs(theta) > 0) {
pivot.rotate(BABYLON.Axis.Y, phi, BABYLON.Space.WORLD);
psiRI = D/(r * F);
psiRO = D * (R + A)/(r * F);
psiFI = D * Math.sqrt(R * R + L * L)/(r * F);
psiFO = D * Math.sqrt((R + A) * (R + A) + L * L)/(r * F);

//sphere.rotate(BABYLON.Axis.Y, phi, BABYLON.Space.WORLD);
wheelFI.rotate(BABYLON.Axis.Y, psiFI, BABYLON.Space.LOCAL);
wheelFO.rotate(BABYLON.Axis.Y, psiFO, BABYLON.Space.LOCAL);
wheelRI.rotate(BABYLON.Axis.Y, psiRI, BABYLON.Space.LOCAL);
wheelRO.rotate(BABYLON.Axis.Y, psiRO, BABYLON.Space.LOCAL);
}
else {
pivot.translate(BABYLON.Axis.X, -distance, BABYLON.Space.LOCAL);
wheelFI.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelFO.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelRI.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
wheelRO.rotate(BABYLON.Axis.Y, psi, BABYLON.Space.LOCAL);
sphere.translate(BABYLON.Axis.X, -distance, BABYLON.Space.LOCAL);
}
points_track.push(new BABYLON.Vector3(sphere.position.x, sphere.position.y, sphere.position.z));
if(start_move == 1) {
var line = line2D("line", {path: points_track, width:15}, scene);
//var tube = BABYLON.MeshBuilder.CreateTube("tube", {path: points_track, radius: 15, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
var matLine = new BABYLON.StandardMaterial("line_mat", scene);
matLine.diffuseColor = new BABYLON.Color3(1, 1, 0);
matLine.alpha = 0.02;
line.material = matLine;
}
start_move = 1;
console.log(sphere.position.x);

}

});

##### Share on other sites

don't know how create line (track or fingerprint) when the car turning( My sphere doesn't moving after turning...

This is my code :

##### Share on other sites

wow, it's amazing!!! It works! Thanks, thanks, thanks @JohnK))))

Can you give me a little description about your helping method. As I understang this line "points_track.push(sphere.getAbsolutePosition().clone());" help me. Am I right?

P.S. sorry for my "good" english)))

##### Share on other sites

one question is still. After moving car with track, some time later slows down the browser ( Is it because I draw line in the registerAfterRender() function? Maybe, I can just colored the ground under my car (without saving points for drawing line)? is there such method?

##### Share on other sites
1 hour ago, iri said:

Can you give me a little description about your helping method. As I understang this line "points_track.push(sphere.getAbsolutePosition().clone());" help me. Am I right?

Only partly.

``new BABYLON.Vector3(sphere.position.x, sphere.position.y, sphere.position.z)``

a quick way of getting the same is

``sphere.position.clone()``

So why `.getAbsolutePosition()`?

Line 156 attaches the sphere to the carBody

``sphere.parent = carBody;``

This means that sphere.position will always be its position relative to the carBody and so never changes.

To get the world position of the sphere you need to use sphere.getAbsolutePosition() and hence

``points_track.push(sphere.getAbsolutePosition().clone());``

You could get the same result with

``points_track.push(new BABYLON.Vector3(sphere.getAbsolutePosition().x, sphere.getAbsolutePosition().y, sphere.getAbsolutePosition().z));``

##### Share on other sites
13 minutes ago, iri said:

one question is still. After moving car with track, some time later slows down the browser

Every time the car moves you are creating a new line2D mesh. What looks like one track are layers of many tracks.

A simple way to void this is to dispose of the previous track before creating the next one https://www.babylonjs-playground.com/#SSZ2IM#3

##### Share on other sites

for example this simple model https://www.babylonjs-playground.com/#1YD970#48

If I create car track (as tube - line in 3D) after some time my car will move very slow... and it is not right. Can I draw line on the ground and not saving them as a object? I'm only beginner in JS and babylon JS, but in my mind I can only colored the part of the ground under car with another color - and it will be my car track. Am I wrong?

##### Share on other sites

Sorry in my example #3 and your example #48 the meshes are not getting disposed and are building up. The variable `lines` should be defined once as a var and reused.

Ccorrected version

##### Share on other sites

Thanks, it  is help me, but not for long time. Now I read how optimize this. My car model with track can't be slow(

## Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.