Improved/Creation a Ramp/Path function


I have a function that allows you to create Ramps by clicking 4 points.

I would like to modify this so that this is done by clicking 2 times (one click at the top of a vertex and one click at the bottom) by setting a ramp width instead to get the 4 points.

I don’t know how to modify this function to obtain the same result but with 2 clicks instead of 4.

Could anyone help me with this.


Oh, you know I love these kind of questions :slight_smile:

Create Ramp | Babylon.js Playground (

How about this? One click and drag?

Mostly using your code, and of course not error prone, but the basics are there


I like this approach. It’s a great idea too as you did it.

At the beginning I thought of making something from a spline which follows the terrain to use the ramp code to also make paths for example.

But I’m going to study your code to try to understand all this.

Thank you very much @RaananW

1 Like

I was asking myself a question. Is it possible of create a ribbon along a line ?

On this PG:
Draw a path by clicking and dragging. Each sphere represents a transformation node.and the line the path to create a ribbon of a width to define.

I would like to use the same code base to create paths that follow the terrain. But here I would just like to create the ribbon that follows the line. Is this something possible?

This might be a question you would love too. @RaananW :smile:
With all my thanks for your help.

1 Like

Why, yes I do!

But don’t have the time to really dive in here. However, I think you are on the right path.
You can use Path3D for that - generate an updated Path3D and constantly update the points array every time a new one was created. There is an example here - Path3D | Babylon.js Documentation (

Using this Path3D you can generate a ribbon, similar to the way a Tube is generated. A tube requires an array of Vector3, that you can generate from a Path3D. Technically, you don’t really need the Path3D - you can just update the path array and pass it to the tube. The reason I thought you might want to use Path3D is first because it will contain all of the math you need for paths. Second - it is a goot container. And third - i am not sure you want a tube. A tube is a specialized case of a Ribbon. Look at the Tube code - Babylon.js/packages/dev/core/src/Meshes/Builders/tubeBuilder.ts at master · BabylonJS/Babylon.js ( it creates a ribbon, based on a self-generated set of Vector3. These are generated based on parameters you pass to this function - Babylon.js/packages/dev/core/src/Meshes/Builders/tubeBuilder.ts at master · BabylonJS/Babylon.js ( which takes a Path3D that is based on the generated Path (a vector3 array).

So TL;dr - sorry, sadly no time to really dive in, but I would recommend you to either use an updatable tube (if that is acceptable) or create you own customized ribbon, based on the tube-creation function.


Thank you for putting me on a trail. I’ll try to understand all of this. I understand that you have other occupations.

1 Like

For the moment I have managed to do that. Is what I am doing correct?
I have the impression that it’s not very regular, but it seems to work.

Draw a circle. the path that we trace creates a ribbon when we release. Then I use the same function as to create the ramp.

I don’t understand what’s happening. On this PG if you draw a large circle on the ground, the path forms an Ellice instead of being horizontal., the ground does not flatten out following the ground. In short, I don’t think I understand anything about what’s going on.

Does anyone have any idea ?

Just to give you an idea of ​​what I’m trying to achieve. But I really can’t do it. Everything I try to do fails.
So maybe I don’t have the right method to do this.


Might get you a little further - Create Path Final | Babylon.js Playground (

Use a tube, dispose it after you are done with it, and make sure to update the ground heights to get the right heights after updating the positions (line 219)

1 Like

It’s awesome. Thank you very much @RaananW
Little question. Can the tube follow the shape of the terrain?

There I intersect the Y position of the first click to create the tube at the right height. But can he follow the curve of the terrain?

I have the impression that I will be able to make progress on this functionality.

I tried to foul the Y tube to flatten it. But if I do that, it no longer curves in a Y shape (it no longer follows the shape of the land)
I can only flatten it by 40% maximum. But the path shape is rounded, which is not correct.

So I was wondering. There are cylindrical tubes, but why is there no square tube? It’s a tube too. Is it not possible to add the shape to the tube options to make a square tube?
I’m going to open a new topic for this.