iri

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 this post


Link to post
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:

http://jerome.bousquie.fr/BJS/demos/rollercoaster.html

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

originally you had

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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.