iri 0 Report post Posted November 7, 2018 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; }); Quote Share this post Link to post Share on other sites
Deltakosh 4315 Report post Posted November 7, 2018 Hello and welcome! Would you mind adding your code to a playground so we can help fixing it? Quote Share this post Link to post Share on other sites
QuintusHegie 42 Report post Posted November 7, 2018 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 🙂 Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 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. Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 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 As already suggested by DK a playground of your code working or not helps us to help you. Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 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); } }); Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 Please create a Playground with your code and include with your questions. Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 I don't know how create line (track or fingerprint) when the car turning( My sphere doesn't moving after turning... This is my code : https://www.babylonjs-playground.com/#SSZ2IM#1 Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 Getting closer https://www.babylonjs-playground.com/#SSZ2IM#2 1 iri reacted to this Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 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))) Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 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? Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 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)); Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 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 Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 8, 2018 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? Quote Share this post Link to post Share on other sites
JohnK 991 Report post Posted November 8, 2018 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 https://www.babylonjs-playground.com/#SSZ2IM#5 Quote Share this post Link to post Share on other sites
iri 0 Report post Posted November 9, 2018 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( Quote Share this post Link to post Share on other sites
