Render 3D Line instead of 2D Line

Questions
1

Hello~

I’m trying to create a 2D Line with certain width: https://playground.babylonjs.com/#66VMB1#43
ultimately I want to change dynamically the width for each stroke of the line.

I tweaked some code from here since once I used the non-flat mesh, the code didn’t work.

but my code here doesn’t work either as I expected. I’m thinking angle and direction are the one I need to look at but I didin’t have any luck and am not really sure how to fix it to render the line even with the same width.

I tried another way here by 1) draw lines 2) clone and moved each line 3) tried to find the intersecting points of moved lines
but there were problems in this way as well
Problem#1 it looks like the lines are hardly intersecting even though it looks like :smiling_face_with_tear:
Problem#2 if I use more complicated points which doesn’t sit on the same plane(maybe), the calculation of centroid is totally off obviously and gives me a result like this

I tried all I can do but I’m totally stuck here :sob:
Would you mind sharing your insight for me?

2

Drawing lines is hard :slight_smile:

That’s what this article says, maybe it can help you:

It also links to this lib:

3 Likes
3

Have you tried modelling a line segment with quad?

Please explain with simple examples what exactly you want to achieve.

4

Maybe you are looking for the ribbon example with which you can draw 3D lines with increasing/decreasing line widths - you have just to set the distance smaller or wider to each point of the paths.

Creating Ribbons | Babylon.js Documentation (babylonjs.com)

1 Like