# How to twist a mesh along a path?

Hi everyone!

As the title says, I’m trying here to twist a mesh along a path using shaders.
The vertex shader I am using is based on this one Kinetic Typography with Three.js by Mario Carrillo (live demo, click the “Twisted” link).

The code is producing the expected effect, as long as the mesh follows a straight line on the X axis.
What I would like to do is to twist around its center, a mesh that follows a path. Take the following picture as an example :

My guess is that, inside the vertex shader, I need to update the axis vec3 based on something but I’m lacking the mathematical knowledge to find out how and what…

I would appreciate any guidance on that matter.

Here’s a codesandbox link of what I have right now.
You can use the GUI pannel to “select” and move around the points that are forming the tube geometry. Notice that the shape will go bezerk as soon as you move one of the points.

1 Like

Hi!

4 Likes

Thank you very much for your response @prisoner849 , I’m looking into your codepen right now.

1 Like
1 Like

I have managed to get the desired effect thanks to your suggestions @prisoner849 !
I have updated the original sandbox accordingly (link)
I can’t say that I understand the maths behind it yet, but hopefully I’ll get to it!

There is one line specifically that I stuggle to understand in your codepen. Could you maybe ellaborate?

``````uLengthRatio: {value: objSize.z / curve.cacheArcLengths[200]}, // more or less real lenght along the path
``````

What is this `200`, where does it come from?

1 Like

@TheoGil
By default, `curve` uses `this.arcLengthDivisions = 200;` for calculation of cumulative lengths: https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/src/extras/core/Curve.js#L113L146

Thus, length of `curve.cacheArcLength` is 201, so index of the last item is 200 and it contains the data about full length of the curve.

`objSize.z` is lenght of the model of Koi fish.

And `objSize.z / curve.cacheArcLength[200]` is the ratio between lenght of the model and length of the curve.

2 Likes

Awesome, it makes sense.
Thank you very much once again!