How can I make good tube with three.js? for example railings

Questions
1

I tried to make this kind of railings with tube geometry.

const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(0, 0.837124, -0.343891),
  new THREE.Vector3(0, 0.551485, -0.324998),
  new THREE.Vector3(0, 0.53799, -0.075345),
  new THREE.Vector3(0, 3.78326, 5.13612),
  new THREE.Vector3(0, 4.08796, 5.12389),
  new THREE.Vector3(0, 4.09759, 4.87529),
]);

const railingGeometry = new THREE.TubeGeometry(curve, 128, 0.05, 8, true);
const railingMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const railing = new THREE.Mesh(railingGeometry, railingMaterial);
scene.add(railing);

This is my approach, but it’s really bad…

What I want is this shape.
Also attached glb model of example railing.

image
image1057×707 26.1 KB

Railing.glb (34.1 KB)

2
3

First, thanks for your advise…
But unfortunately, I got this result…

image
image1089×911 10.3 KB

4

I remember having a similar problem once.
CatmullRomCurve3 must create a balance between the points. You have very few points. Try setting few points on the straight sections and very close distances on the curves.

If you need sharp corners, I have this design:
Construction of frames with contour/profile
ProfiledContourGeometryMM

see also
DynamicTubeGeometryCaps
CustomCylinderAndKnee

2 Likes
5

:thinking:

new THREE.CatmullRomCurve3( [...], true, 'catmullrom', 0.025 );

image
image791×524 9.92 KB

(BTW maybe CubicBezierCurve3 provides better control over rounded corners)

2 Likes
6

Thanks for sharing!
I will take a look shortly!

7

Errhhh… :flushed_face:
Can you share your full code part… for this mesh?

8

https://codepen.io/boytchev/pen/raNYqMO

1 Like
9

Thanks for sharing…
I have got a question.
How can I increase(or make) radius of tube?

10

Depends on what you call ‘a radius’. If you mean the radius of the cross section of the tube, it is the radius parameter of TubeGeometry. If you mean the radius of bending around the corners, it is the tension parameter of CatmullRomCurve3. But tension is not versatile. Try different values instead of 0.025 to experience its limitation. It’s better to use cubic Bézier curves.

11

Yeah, I mean radius of cross section of tube…
Seems like you are using line geometry now.
I am wondering whether it will work with tubegeometry… (

12

I though the issue is with the overall shape. So my examples demonstrated the shape with rounded corner. I’m sure you can adapt the code to work with tubes and change the tube’s radius the way you want. If still not working, do not post code fragments, but a working minimal demo in codepen.io or another place, that allows debugging and editing.

13

https://codepen.io/Azure-Phoenix/pen/azbVQNq

Yeah, it’s quite better than my first try!
Thanks.
But now, rounded corners gone… :cry:

14

Note, the tension is 0.025, not 0.1. And the segments will thank you if they are 300, not 100:

let curve = new THREE.CatmullRomCurve3(points, true, "catmullrom", 0.025);
:
let tubularSegments = 300;

image
image668×221 8.46 KB

15

How tension parameter works…?

16

Oooh, @hofk
This example looks really exactly what I want!!!
Thanks for sharing!
I will take a look how I can use this…

17

Well… I think it’s too complex to implement in my case… (((

18

Ok, so actually I am working on this.
I want to make this dynamic for height.
I think I can make steps easily, and vertical railings is also doable…
But I have no sense how to make above railings and kickplate actually…

image
image725×839 80.7 KB

19

And I need solution for many different types of railings, some of them are crazy… (((

image
image1301×395 79 KB

20

Perhaps you can instance smaller mesh chunks along a path…
Each stair type has a beginning piece… N number of middle pieces, and an end piece… all together curved to a path like this: