# [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

Hi!
In a simple case, you can do it, bending a thin box

https://jsfiddle.net/prisoner849/5Lycd4rm/

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

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:
https://jsfiddle.net/prisoner849/fxqbontj/

1 Like

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

https://jsfiddle.net/prisoner849/ch5r672m/

You are the master of vertices, lord of geometries and ruler of space here!!!

5 Likes

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 );
});
``````
2 Likes

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

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

@Cerebes
https://jsfiddle.net/prisoner849/zgd8nc9p/

2 Likes

For a moment I thought you were building more vertices as time went on. My brain doesnâ€™t smart some daysâ€¦

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;
``````   if (v.x > headStart){