[SOLVED] Creating a helical sweep with a flat profile

I am looking at creating a helical shape and would like some guidance on the approach. Imagine you wrapped a flat ribbon around a cylindrical tube (with a space between each turn), that Is the shape I am trying to create.

my initial thought was to use the tube geometry, but that seems to only be able to accept a circular profile. I would like a flat/straight profile

Since I will eventually also want a shape at the end of the helix, I thought about creating a couple of arrays of points, one for the outer helix, the other for the inner helix then use the three shape, but I believe that can only do 2D shapes, which this wont be.

Whilst defining a cylinder would be very confinient, just putting a texture on it wont give me the control I require

The maths behind a helix aren’t difficult, I just don’t know the best approach in ThreeeJS to actually create it? Any guidance would be very much appreciated.

Just seeking clarification:

You mention an outer helix and an inner helix. Is the shape you’re trying to make more like a screw? I was originally picturing the “ribbon” laying flat against the cylinder.

Perhaps you could provide a picture as a visual aid?

1 Like

In a simple case, you can do it, bending a thin box :slight_smile:



1 Like

sorry for the confusion, you are right in your inital thoughts, i meant a ribbon laying flat. I just meant there would be two helixs (either side of the ribbon)

Thank you very much. Thats a very interesting approach and one I would have never thought of…

I eventually may want a shape at the end of the ribbon (for simplicity image it was an arrow head), so i would guess your approach will still work nicely for that, and I could animated it turning/screwing so I think it will do nicely.

You say “in a simple case”, does that suggest that there may be some issues/limitations with it that I may come back to bite me?

thanks again

:slight_smile: I’ve meant, that to bend a thin box is a simple case, because there’s another approach, for example, to build a geometry yourself with creating vertices, setting faces, computing normals and so on.

ah i see, which would be alot more effort than your original response.

out of interest do you know if there is an equivalant of THREE.Shape, but works for 3D…so I calculate a load of points(think the edges of the ribbon) and it fills between like the THREE.Shape does with planar points?

Your double helix sounds quite a bit like DNA, so you could use a helix function to generate the upper and lower points and then create the geometry from those.

I made a DNA pen a while back, here it is in case it’s useful to you.

1 Like

You can use the same approach for a long and narrow plane:

1 Like

Nothing can stop you from deformation of a plane, before you bend it :slight_smile:



This is your scene :slight_smile:
You are the master of vertices, lord of geometries and ruler of space here!!! :fist:


wow thanks alot I wasnt expecting you to do any more. very much appriciated

To do this with THREE.BufferGeometry, it’s easiest to start with THREE.BoxBufferGeometry or THREE.PlaneBufferGeometry, and update the vertices in a similar manner to the solution provided.

geometry.index.array.forEach( (idx, arrayIdx) => {
  // compute xVal, yVal, and zVal based on arrayIdx
  geometry.attributes.position.setXYZ( idx, xVal, yVal, zVal );

Yeah :slight_smile: I’ve chose a usual geometry because it’s slightly easier to manage vertices :slight_smile: In a real app I’d use a buffer geometry, of course :slight_smile:

That ribbon with long steps make for a very interesting wormhole, place the camera inside it and let it go forward.

Yes, I thought about it already too :slight_smile:


For a moment I thought you were building more vertices as time went on. My brain doesn’t smart some days… :face_with_head_bandage:

1 Like

Ok so I have marked this as solved, as it most definelty is, however I do have an additional question, which I dont believe (correct me if wrong) warrents a new topic as it relates completley to the excellent solution given by @prisoner849.

In that fiddle, I cant get my head round the maths that would allow you to keep a consistant arrow head size… you will see what i mean if you change the vars like so…

var rbnWidth = 15;
var rbnSteps = 5;
var rbnStepLength = 50;
var rbnSegsPerStep = 500;
var rbnRadius = 50;
var headHalfWidth = 20;
var headLength = 10;

I can see whats occuring, but I cant for the life of me get my head round how you would keep the head of the arrow looking good. I appriciate it is now curved, but keeping it roughly the same size as before its bent would be desirable. I guess I would need to reduce the rate of increase of the angle for all points after the head start but cant figure out the maths behind it?

i tried the following but it doesnt quite work, I think it still needs to incorporate v.x in some way

   if (v.x > headStart){
     angle = -(headLength / 2* Math.PI * radius ) * THREE.Math.degToRad(360)     

I appriciate its not a direct THREE question, but any assistance would be much appriciated