{
  "id": 17817233,
  "title": "Steel beams in three.js from the same table as the weight calculator",
  "url": "https://urgent.news/2026/11/02/steel-beams-in-three-js-from-the-same-table-as-the-weight-calculator",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-02T15:45:58.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/zonicmirsad/steel-beams-in-threejs-from-the-same-table-as-the-weight-calculator-c6n"
  },
  "original_language": "en",
  "account": "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.\n\nTo 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.\n\nThe 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.\n\nFinally, 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.",
  "summary": "The most practical tool on a steel supplier's website is a weight calculator. You pick a profile (say an IPE 300 beam), a length and a number of pieces, and you get the kilograms for the truck and the quote. While building Ironline, a website template for steel and metal suppliers, we wanted the 3D on the page to show exactly what the calculator is calculating, not a generic model. So the beams,…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}