Building an Interactive 3D Helical Spring Simulator with Three.js and Engineering Math

Çağrı Göktuğ Çelikdemir — Mon, 14 Sep 2026 14:17:04 +0000

I’m a mechanical engineer working mainly with machine design and manufacturing. Spring calculations are usually straightforward, but in practice they often end up in spreadsheets, PDF tables, or older engineering software.

I wanted something more interactive, so I built a real-time 3D helical spring simulator for my free engineering platform, CelCalc.

The idea is simple: change the spring dimensions or applied load and immediately see both the calculations and the 3D model update.

The engineering side

The simulator calculates parameters such as spring index, Wahl factor, spring rate, deflection, solid length, and shear stress.

For example, the spring index is:

C = (Dout - d) / d

The Wahl factor is:

K = (4C - 1) / (4C - 4) + 0.615 / C

The shear stress is calculated from the applied axial force:

τ = K × (8FD) / (πd³)

These calculations are connected directly to HTML sliders, so everything updates in real time.

I also added a coil-bind check. If the calculated deflection would take the spring below its solid length, the simulator limits the movement and indicates the solid state.

Generating the 3D spring

Since the dimensions are user-controlled, a fixed 3D model wouldn't work.

I created a custom THREE.Curve and generate the spring parametrically:

class SpringCurve extends THREE.Curve {
constructor(meanRadius, length, totalCoils) {
super();
this.meanRadius = meanRadius;
this.length = length;
this.totalCoils = totalCoils;
}

getPoint(t, optionalTarget = new THREE.Vector3()) {
const theta = t * this.totalCoils * Math.PI * 2;
const x = this.meanRadius * Math.cos(theta);
const z = this.meanRadius * Math.sin(theta);
const y = t * this.length;

return optionalTarget.set(x, y, z);

}
}

I then use THREE.TubeGeometry to turn the curve into the actual spring.

When a parameter changes, the old geometry is disposed and regenerated.

Making stress visible

I also wanted the stress to be visible rather than just another number on the screen.

For this simulation I use 850 MPa as the visualization limit. This is a simulation assumption, not a universal allowable stress for every spring material.

As utilization increases, the spring changes from green to yellow to red.

This makes it easier to see the effect of changing the geometry or applied load instead of only reading the calculated values.

The model is intentionally simplified for interactive exploration. It is not intended to replace detailed spring design standards, material-specific allowable-stress checks, or FEA.

Try it

You can try the Helical Spring Simulator on CelCalc:

https://celcalc.com/

I’m curious: what engineering calculation would you like to see as an interactive web tool?

DEV Community: Çağrı Göktuğ Çelikdemir

Building an Interactive 3D Helical Spring Simulator with Three.js and Engineering Math

The engineering side

Generating the 3D spring

Making stress visible

Try it