← All projects

Truckloader

In progress

Three.js frontend for truck loading mechanics — visualise cargo placement, weight distribution, and load plans in 3D.

Role
Solo build (Three.js scene, loading physics UX, procedural truck/cargo models, web frontend)
Timeframe
Jun 2026 to present
WebGL / browser
Runtime
Drag · snap · raycast
Interaction
Load plan views
Output
Procedural + glTF
Models

Objective

Build an interactive 3D web experience that shows how cargo fits inside a truck trailer: drag-and-drop placement, weight and balance feedback, and clear visuals for loaders and dispatchers without installing desktop software.

Outcome

A browser-based Three.js application in active development: procedural truck and pallet meshes, orbit camera controls, raycast picking for cargo placement, and a UI layer for dimensions, weight limits, and load-plan export. Proves real-time WebGL product UX and domain-specific 3D interaction design.

A look inside

Scene: trailer interior with orbit camera (placeholder).
Placement: drag-and-drop pallets with collision hints (placeholder).
Weight: axle totals and balance indicators (placeholder).
Catalogue: item list and dimensions for load planning (placeholder).

How it works

01

3D trailer scene

Configurable trailer dimensions with interior volume, wheel wells, and door zones rendered as a readable loading bay.

02

Cargo placement mechanics

Pick, move, and rotate pallets/boxes with snap-to-grid and collision hints so illegal overlaps are visible before save.

03

Weight and balance feedback

Running totals for axle load estimates and centre-of-gravity indicators tied to each placed item's weight metadata.

04

Load-plan UI

Side panel for item catalogue, dimensions, and export-friendly summary views (top-down and elevation) alongside the live 3D scene.

What it is

Truckloader is a Three.js web frontend focused on truck loading mechanics: how cargo fits in a trailer, how weight distributes across axles, and how dispatchers can iterate on a load plan in the browser.

How it works

  • Scene. A Three.js renderer hosts the trailer mesh, lighting, and camera rig (orbit + focus on placement zone).
  • Interaction. Raycasting selects cargo; transforms update position/rotation with grid snap and overlap warnings.
  • Data. Each cargo item carries L×W×H and weight; the UI aggregates totals and flags over-limit states.
  • Views. Toggle top-down and side elevation helpers without leaving the 3D context.

Relation to this portfolio

This site already uses Three.js for the decorative orb (src/lib/evil-orb.ts). Truckloader is the product-grade application: domain meshes, interaction loops, and a UI shell around the renderer rather than ambient background FX.

Status

WIP. Scene bootstrap, camera controls, and placeholder procedural trailer geometry are scaffolded. Next: cargo catalogue, snap/collision rules, weight math, and optional demo.kind: iframe once a hosted build exists.

Flip demo.kind to iframe when a public demo URL is deployed. Replace SVG placeholders with WebGL capture screenshots or a short screen recording.

Skills used

TypeScript Three.js / WebGL React Dashboard UX

Tech stack

Three.js WebGL TypeScript Vite (or Astro island) glTF / procedural geometry Raycasting · OrbitControls