How to twist a mesh along a path?

Questions
, ,
1

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 :
kdwouq01

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
2

Hi!
Maybe these links will be helpful:

  1. Spline + DataTexture
  2. https://github.com/zz85/threejs-path-flow
4 Likes
3

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

I’ve also asked for help on twitter and a solution that seems similar to your implementation has been suggested (link to tweet).

1 Like
4
1 Like
5

I have managed to get the desired effect thanks to your suggestions @prisoner849 ! :partying_face:
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
6

@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
7

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