Create a spring

Hi, i’m quite new but i’m trying to learn it because i need it for work. I need to create a spring and i also need to set,if it’s possible, the distande between a “level” and another, how many “truns” the spring has to do and the diameter of the base. I saw the addon created by @hofk but i hanven’t understand how it works. Can someone help me?

You can create a spiral spring with my addon ( Addon. Produces almost infinite many time-varying geometries with functions), then you have to add the addon and choose the appropriate parameters.

To explain how the addon works would go too far here, because it is quite complex and the spring is just an example.

You can find another spring in the collection. It is relatively easy to understand. A cylinder is bent to fit. You can experiment with this example. Good luck :slightly_smiling_face:



Thanks man,it was exactly what i was looking for. I only have two other question:

  1. Can I adjust the end of the cilynder in the right place or it can’t be fixed becouse it has to stay at the same height of the start?

2)Is it possible instead of show the spring alredy done, show it creating itself while the animations are running? If it’s possible how can i do?

Do you mean it like this:

2022-11-28 09.14.44
const T = 2.2; // twists of the spiral

let t = 0;
animate( );

function animate( ) {
  t += 50.3367;
  requestAnimationFrame( animate );
  //mesh.rotation.z += 0.01; 
  geometry.setDrawRange ( 0, Math.trunc( t ) );
  renderer.render( scene, camera );

Sorry , I understand that i haven’t made it clear :sweat_smile:, what i meant was that i would like to see,starting from an empty scene, the spring that has 0 twist and slowly starts to crate the twist untill it reaches the number for twist that we define here:
const T = 5; // twists of the spiral.
Is now more clear or do i have to give you more explanation?
Sorry but my english isn’t very good and I sometime find difficoult to express myself.

Mine is equally meager, I always use DeepL Translate: The world's most accurate translator :slightly_smiling_face:

The problem is the order in the construction of the three.js cylinder geometry.
You can see that in the video.
geometry.setDrawRange ( 0, Math.trunc( t ) );

You simply have to create a custom cylinder geometry where the cylinder is constructed from the bottom up. I have already created some special geometries.

hofk (Klaus Hoffmeister) · GitHub

I’d have to see if this order is included.

(post deleted by author)

I made a video so i can show you what i wanted to say

I would like to participate, a bit )



Man that’s amazing, you saved me a lot of time of work, thank you so much :heart:

1 Like

@il_luzzi You’re welcome :handshake:
Keep in mind, it’s not the ultimate solution. All the logics for building of a spring with parameters on js side, can be implemented in shaders, leading to better performance.

I’m alredy putting my hands on the code trying to understand it and making it as suitable as possible for me.
Thank you so much again

1 Like

Aside from the above implementations, you can also use THREE.ExtrudeGeometry

You would just need to create the points on a spiral and that class will then take care of creating the geometry.