How to create spiral Stairs

Questions
, , , , ,
1

please how to created spiral stairs like in this picture below : spiral stairs
I used this code:

const spiralstairs = new THREE.BoxGeometry(5,20,1, 1, 20, 1);
    const spiralmaterials = new THREE.MeshLambertMaterial({ color: 'green', wireframe:true,side: THREE.DoubleSide });
    const spiralMesh = new THREE.Mesh(spiralstairs,spiralmaterials);
    scene.add(spiralMesh)
    spiralMesh.position.y=5;
    for(let i=0;i<42;i+=2){
    spiralstairs.vertices[i].z=5*Math.sin(2*i*Math.PI/22);
    spiralstairs.vertices[i].x=5*Math.cos(2*i*Math.PI/22);
      }
      for(let i=1;i<42;i+=2){
        spiralstairs.vertices[i].z=5*Math.sin(2*i*Math.PI/22);
        spiralstairs.vertices[i].x=5*Math.cos(2*i*Math.PI/22);
          }

I got This result :

Capture
Capture788Ă—617 89.6 KB

2

To create spiral staircase, all you’d really need is to create a single prefab of a step, with a column segment on one side, and a slight angle on the other side - then just duplicate that step, translate upwards, rotate, rinse-and-repeat. Generating tons of vertices in a loop seems not only tedious but also is likely going to be quite a bit slower.

1 Like
3

Generating the geometry in code is tedious, (but not neccessarily slower than loading it)…
On the other hand… to texture it, you’d have to synthesize/generate UVs as well… so as you said @mjurczyk for that it probably would be easiest to import a single stair step model and instance it.

I took a stab at it @mohamad_chouacha : https://harmonious-adhesive-freckle.glitch.me

image
image1920Ă—1108 164 KB

(I didn’t bother with instancing… just clone() ing a loaded stair step mesh…)

4

Hi @mohamad_chouacha …

I could not resist…

https://jrlazz.eu5.org/anim/stairs.html

Hope You like the idea. :wink:

4 Likes
5

@jrlazz :smiley: nice! these geometry style questions are like catnip!
I like your sample setup… minimal and clever!

3 Likes