iri Posted November 7, 2018 Share 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 Link to comment Share on other sites More sharing options...
Guest Posted November 7, 2018 Share Posted November 7, 2018 Hello and welcome! Would you mind adding your code to a playground so we can help fixing it? Quote Link to comment Share on other sites More sharing options...
QuintusHegie Posted November 7, 2018 Share 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 Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share 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 Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share Posted November 8, 2018 Please create a Playground with your code and include with your questions. Quote Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share Posted November 8, 2018 Getting closer https://www.babylonjs-playground.com/#SSZ2IM#2 iri 1 Quote Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share 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 Link to comment Share on other sites More sharing options...
iri Posted November 8, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
JohnK Posted November 8, 2018 Share 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 Link to comment Share on other sites More sharing options...
iri Posted November 9, 2018 Author Share 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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.