3D Container Loading Simulator — Poles & Flanges

A free, single-page 3D tool that estimates how many street light poles or flanges fit in a shipping container, how many containers an order needs, and an estimated freight cost. Drag to orbit, scroll to zoom.

Built with Three.js loaded from CDN — no build step. The packing math lives in a standalone packing.js so it can be reused and unit-tested.

Live demo

Deployed via GitHub Pages. (URL added after first deploy.)

What it does

• Poles: laid lengthwise, packed across the width and stacked up the height, with a real-world packing-utilisation factor.
• Flanges: square plates stacked in the container.
• Takes the lower of the volume limit and the payload weight limit.
• Computes containers needed for a target order quantity and an optional freight estimate.

Method

poles   per container = floor(W/dia) × floor(H/dia) × floor(L/length) × utilisation,
                        capped by floor(payload / pole weight)
flanges per container = floor(L/side) × floor(W/side) × floor(H/thickness) × utilisation,
                        capped by floor(payload / flange weight)
containers needed     = ceil(target quantity / per container)
freight estimate      = containers × rate per container

Container internal dimensions (m) and payload (kg) used:

Container	L	W	H	Payload
20′ GP	5.90	2.35	2.39	28,000
40′ GP	12.03	2.35	2.39	26,500
40′ HC	12.03	2.35	2.69	26,500

This is an estimate, not a stuffing plan

The model assumes identical items and simple orthogonal stacking. It does not model tapered-pole nesting, bundling, dunnage, mixed loads or centre-of-gravity rules — real loads are usually tighter. For an exact loading plan and live freight quote, contact the manufacturer.

Deploy on GitHub Pages

1. Push all files to a public repo.
2. Settings → Pages → Source: main / root.
3. Live at https://<user>.github.io/<repo>/. (CDN Three.js needs internet — fine on Pages.)

Add a CNAME file with your own domain to use a custom domain (zero code change).

Reusing the logic

const P = require("./packing.js");
const c = P.CONTAINERS["40HC"];
P.packPoles(c, 0.15, 10, 110, 0.85);   // -> { perContainer, byVolume, byWeight, ... }
P.packFlanges(c, 0.30, 0.02, 8, 0.90);
P.freight(216, 1000, 3000);            // -> { containers: 5, total: 15000 }

License

MIT

---

Built and maintained by Leappole, a street light pole, flange & lighting hardware manufacturer.