Steel beams in three.js from the same table as the weight calculator

The most practical tool on a steel supplier's website is a weight calculator. Users select a profile, such as an IPE 300 beam, a length, and the quantity of pieces to determine the weight in kilograms for transport and quoting purposes. While developing Ironline, a website template for steel and metal suppliers, the objective was to have the 3D display on the page accurately reflect what the calculator is calculating instead of a generic model.

To achieve this, the beams, tubes, and angles were extruded in three.js from the same section data utilized by the calculator. The data for rolled sections is sourced from standard tables, with each IPE row containing the height, flange width, web and flange thickness, and the nominal weight per meter. For example, IPE has a weight of 42.2 kg per meter for a length of 6 meters and 12 pieces, resulting in approximately 3,038 kg.

The calculator uses the table weight for IPE, HEA, and UPN sections, while other types like tubes, flat, round, and square bar, angles, and plate are computed from geometry using a density of 7.85 kg per mm² per meter. The function `outline(kind, dims)` converts a row into a polygon in millimeters, centered on (0, 0). An I-beam is composed of twelve points, including a radius where the web meets the flanges.

The `iBeam` function calculates the points, and `rounded()` rounds the corners using a specified radius. Tubes, angles, and UPN channels have their own point lists.

Finally, the outline is extruded into a THREE.Shape with holes represented as THREE.Path objects. The extrusion process involves scaling the shape to length, where 1 unit equals 100 mm, and the calculator scales its single piece to a fixed size instead.