Ein 3D-Lager-Visualisierer mit Three.js

Ich baue an einem 3D-Lager-Visualisierer — einer Möglichkeit, direkt im Browser zu zeigen, wie ein Lager tatsächlich funktioniert, statt es mit einem Flussdiagramm oder einer Folie zu erklären. Lager lassen sich auf Papier schwer beschreiben: Waren, Menschen, Fahrzeuge und Softwaresysteme greifen in einer bestimmten Reihenfolge ineinander, und genau diese Reihenfolge ist der Kern. Also habe ich das Ganze in 3D umgesetzt und zum Durchklicken gemacht.

Was man hier sieht

Das erste Szenario, das ich gebaut habe, ist ein Wareneingang — der Prozess, der beginnt, wenn eine Lieferung an der Rampe ankommt, und endet, wenn die Ware eingelagert und im System gebucht ist. Es ist ein Rundgang in 16 Schritten: Lieferavis und Zeitfenster, Anlieferung an der Rampe, Entladung von zwei Ladeeinheiten, Identitätsprüfung, Wareneingangsbuchung, Qualitätsprüfung, Etikettierung und das Lagerverwaltungssystem (WMS), das ermittelt, wohin jede Palette gehört.

Danach gehen die beiden Ladeeinheiten getrennte Wege. Die erste kommt in ein automatisches Hochregallager — sie wird an die Fördertechnik übergeben, am I-Punkt geprüft und von einem Regalbediengerät eingelagert. Die zweite fährt per Stapler zu einem manuellen Palettenregal, wo der Lagerplatz geprüft, gescannt und quittiert wird.

Selbst ausprobieren

Es läuft live im Browser, ganz ohne Installation. Mit „Zurück“ und „Weiter“ gehst du den Prozess Schritt für Schritt durch, lässt ihn automatisch abspielen oder machst selbst einen Rundgang durchs Lager. Ein Klick auf eine Palette zeigt Artikel und Menge; mit gedrückter Maustaste drehst du die Ansicht, mit dem Mausrad zoomst du. Die Oberfläche gibt es auf Deutsch und Englisch.

Live ausprobieren: lama-space.com/3D-Warehouse

Ein wenig zu Three.js

Das 3D basiert auf Three.js, einer JavaScript-Bibliothek, die auf WebGL aufsetzt, der im Browser eingebauten Grafikschnittstelle. Ohne sie bedeutet 3D, Grafikcode auf niedriger Ebene zu schreiben; mit ihr arbeitet man mit vertrauten Begriffen — Szene, Kamera, Licht und Objekte, die man platziert und bewegt.

Das Lager besteht aus einfachen Bausteinen: Quader, Flächen und Zylinder ergeben zusammen Paletten, Regale, Rampentore und den Stapler. Wiederkehrende Objekte werden als Instanzen gezeichnet, sodass viele Kopien in einem Durchgang gerendert werden, Beschriftungen in der Szene entstehen als Texturen, und die Orbit-Steuerung sorgt für die Kamera zum Drehen und Zoomen. Genau deshalb habe ich sie gewählt: Der Code bleibt lesbar, und jedes Teil lässt sich leicht ändern oder erweitern.

Wie es weitergeht

Aktuell ist das ein solides Fundament, kein fertiges Produkt — und ehrlich gesagt gibt es noch viel zu tun, damit es wirklich robust und Plug-and-play wird. Die Richtung, die ich anstrebe:

• Layouts und Prozesse als Daten beschreiben, statt sie fest im Code zu verdrahten — ein neues Lager oder ein neuer Ablauf soll nicht bedeuten, die Szene neu zu schreiben
• Eine Bibliothek wiederverwendbarer Bausteine — Regale, Rampen, Förderer, Fahrzeuge —, die sich frei kombinieren lassen
• Anbindung echter Daten aus einem Lagerverwaltungssystem, sodass nicht nur ein geskripteter Rundgang, sondern der laufende Betrieb sichtbar wird

Wenn du mit Lagern, Logistiksoftware oder 3D im Web arbeitest und Ideen oder Feedback hast, freue ich mich darauf — du erreichst mich über die Kontaktseite.