[SOLVED] Creating a helical sweep with a flat profile

Questions
1

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.

2

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
3

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

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

Helix

1 Like
4

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)

5

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

6

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

7

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?

8

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
9

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

1 Like
10

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

Helix_Arrow

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

6 Likes
11

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

12

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
13

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:

14

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

15

@Cerebes
Yes, I thought about it already too :slight_smile:
https://jsfiddle.net/prisoner849/zgd8nc9p/

2 Likes
16

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
17

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

18

@prisoner849 @TheJim01
I know I am quite late to the party here, but I was wondering if you could provide an example of how to do this with Buffer Geometry. I was able to replicate this with v105 while geometry vertices were directly accessible, but can’t seem to wrap my head around how to iterate through Buffer Geometry vertices.

I am essentially trying to replicate @prisoner849 's inital example of bending a thin box (no arrow needed)

Thanks!

19

@Nathan_Caspar
Here you are, BufferGeometry: Edit fiddle - JSFiddle - Code Playground
Works with r164

20

Thank you so much! Really appreciate the help with the buffer geometry, I think I have a better understanding of how it works now.

1 Like