Ein Ast steht etwas zu weit vorne. Die Pflanze daneben nimmt mehr Platz ein als gedacht. Und die Wasserschale passt zwar noch hinein, aber irgendwie wirkt die ganze Ecke zu voll.
Solche Entscheidungen lassen sich schwer aus einer Einkaufsliste ablesen. Man möchte die Dinge nebeneinander sehen, ein Stück verschieben, sich den Raum von oben anschauen. Genau dafür habe ich für Geckio das Terrarium Studio gebaut: einen 3D-Planer, in dem man eine kleine Naturwelt im Browser einrichten kann.
Die öffentliche Beta ist kostenlos und ohne Konto nutzbar. Man legt die Innenmaße fest, platziert Pflanzen, Äste, Steine und Zubehör und speichert den Entwurf lokal oder als Datei. Wer ein Terrarium online planen möchte, kann direkt anfangen; wer selbst einen 3D-Planer entwickeln will, findet hier auch die Entscheidungen hinter der Three.js-Szene.
Die gestalterische Idee war von Anfang an Teil des Produkts. Es sollte Freude machen, eine Pflanze zu setzen oder einen Stein zu verrücken. Gleichzeitig mussten Innenmaße, Objektgrößen und Positionen nachvollziehbar bleiben. Aus dieser Kombination ist eine öffentliche Beta geworden, die sich stellenweise wie ein kleines Aufbauspiel anfühlt.
Terrarium online planen: vom Innenmaß zur Einrichtung
Ein 3D-Terrarium-Plan hilft vor allem dabei, Platz und Proportionen vor dem Einrichten zu prüfen. Für einen ersten eigenen Entwurf würde ich so vorgehen:
- Art und Beckenform klären. Die Anforderungen der vorgesehenen Tiere bestimmen die Planung. Der Geckio Terrarium-Rechner hilft, passende Maße aus den Artenprofilen einzuordnen.
- Nutzbare Innenmaße und Bodengrund eingeben. Das Beispiel im Artikel ist 90 × 50 × 70 cm groß. Bei 8 cm Substrat bleiben 62 cm Höhe darüber. Das ist ein Rechenbeispiel aus dem Studio, keine Größenempfehlung für eine bestimmte Art.
- Die großen Elemente zuerst setzen. Wurzel, Versteck und Wasserschale geben der Anordnung Struktur. Pflanzen kommen danach hinzu. So sieht man früher, wo sich Einrichtung gegenseitig Platz wegnimmt.
- Front und Draufsicht vergleichen. Von vorne prüfen, wie die Höhe genutzt wird; von oben schauen, ob Bodenflächen und Zugänge frei bleiben. Reale Naturmaterialien zusätzlich vermessen, weil ihre Formen von den vereinfachten Modellen abweichen.
- Varianten kopieren und sichern. Eine zweite Anordnung lässt sich im selben Browser speichern. Für ein Backup oder ein anderes Gerät den Plan als JSON exportieren; PNGs dienen als Bildreferenz.
Für die praktische Vorbereitung habe ich auf Geckio außerdem eine Anleitung zur Terrariumplanung in 3D zusammengestellt. Hier auf TOSA geht es zusätzlich darum, wie sich dieser Ablauf in eine gut bedienbare Web-App übersetzen lässt.
Mit einem kleinen Regenwald anfangen
Die erste Frage war ziemlich praktisch: Lässt sich ein Terrarium-Planer als räumliches, freundlich gestaltetes Browserwerkzeug bauen? Mit Pflanzen, Holz und Steinen, die man tatsächlich anfassen und umstellen möchte?
Der erste brauchbare Ausschnitt brauchte dafür noch keinen riesigen Katalog. Ein bepflanztes Beispielbecken, anpassbare Innenmaße, einige unterschiedliche Objektformen und mehrere Kameraperspektiven reichten, um den Ablauf zu erproben. Dazu kamen früh Speichern, Rückgängig und Export. Ein Entwurf sollte sich verändern lassen, ohne dass die vorherige Idee sofort verloren ging.
Ich habe mich für einen eingerichteten Start entschieden. Beim Öffnen wartet bereits „Mein kleiner Regenwald“ mit Pflanzen, einer Kletterwurzel, Steinen, einem Versteck und einer Wasserschale. Man kann sofort etwas auswählen und bewegen. Leere, breite und hohe Vorlagen stehen daneben für eigene Entwürfe zur Verfügung.
Damit wird das erste Beispiel auch zur Erklärung der Bedienung. Es zeigt, was mit dem Werkzeug möglich ist, bevor man jede Schaltfläche verstanden hat.
Erst greifen, dann genauer einstellen
Ein räumlicher Planer sollte räumliche Fragen möglichst direkt beantworten. Deshalb lassen sich Objekte im Becken ziehen. Wer den Hintergrund zieht, dreht die Kamera. In der Frontansicht verändert das Ziehen eines Objekts auch seine Höhe; in den anderen Ansichten wird es auf seiner aktuellen Höhe horizontal verschoben.
Für genauere Korrekturen gibt es Zahlenfelder, kleine Dreh- und Höhenschritte sowie Ausrichten am Substrat, an der Rückwand oder in der Mitte. Die Tastatur ergänzt diese Bedienung: Pfeiltasten verschieben, Umschalt vergrößert den Schritt, und Escape bricht eine laufende Verschiebung ab.
Das Raster steht zunächst auf fünf Zentimetern. Für feinere Anordnungen lässt es sich auf einen Zentimeter oder freie Platzierung umstellen. So kann man zuerst eine Komposition ausprobieren und anschließend die Abstände prüfen, ohne zwischen zwei getrennten Werkzeugen wechseln zu müssen.
Das Gefühl eines Aufbauspiels steckt in kleinen Reaktionen
Der spielerische Eindruck entsteht aus vielen kleinen Entscheidungen. Die Holzgrundplatte hat abgerundete Kanten. Pflanzen und Steine sind bewusst stilisiert. Licht und Schatten geben den Formen Tiefe, ohne daraus eine fotorealistische Materialvorschau zu machen.
Hinzu kommt die Bewegung: Ein neues Objekt erscheint mit einem kurzen Plopp. Beim Ziehen folgt es der Zielposition mit einem leichten elastischen Nachziehen. Nach dem Loslassen beruhigt es sich wieder. Das macht den Vorgang sichtbarer und gibt ihm etwas von einem Gegenstand, den man gerade abgesetzt hat.
Die Klänge sind ähnlich zurückhaltend. Aufnehmen, Platzieren, Einrasten und Löschen können kurze synthetische Töne auslösen. Der Ton ist beim Start ausgeschaltet und lässt sich bewusst einschalten. Die Beta verwendet dafür einfache, im Browser erzeugte Klänge; ein ausgearbeitetes Soundset für Holz, Stein oder Blätter wäre ein weiterer Schritt.
Auch Bewegung ist eine Einstellung, die respektiert werden muss. Bei reduzierter Bewegung entfallen die Pop- und Dehnungseffekte sowie das weiche Nachziehen. Wenn nichts bewegt oder animiert wird, läuft die Darstellung ohne dauerhafte Animationsschleife weiter.
Die Animation darf den Plan nicht verändern
Unter der Oberfläche liegt eine wichtige Trennung. Der gespeicherte Plan enthält die Innenmaße des Beckens und für jedes Objekt Größe, Position und Drehung. Eine Einheit in der 3D-Szene entspricht einem Zentimeter. Der Bodengrund gehört zum Innenraum und verringert die freie Höhe darüber.
Die kleinen Verformungen beim Ziehen liegen auf einer eigenen visuellen Ebene. Wenn ein Stein kurz nachwippt oder eine Pflanze beim Erscheinen wächst, werden dadurch ihre gespeicherten Maße nicht verändert. Für die Bildexporte stellt die Szene die unverformten Objektzustände her.
Eine Verschiebung wird außerdem erst beim Loslassen als ein Schritt in die Rückgängig-Historie übernommen. Escape stellt die vorherige Position wieder her. Das ist eine unscheinbare Entscheidung mit großer Wirkung auf den Ablauf: Eine kleine Bewegung lässt sich mit einem einzigen Rückgängig-Schritt zurücknehmen.
Die Größen bleiben dennoch Planungsgrößen. Eine reale Wurzel ist unregelmäßiger als ihr Modell. Die Abstandsanzeige und Hinweise auf überlappende Objektumrisse helfen bei der räumlichen Orientierung; sie sind keine exakte Prüfung, ob zwei reale Oberflächen kollidieren.
Licht zum Anschauen
Die Lichtsteuerung ist ein eigener kleiner Bereich: Lampe an oder aus, Helligkeit, wärmere oder kühlere Lichtfarbe, Position und Tages- oder Abendstimmung. Man kann ausprobieren, wie dieselbe Einrichtung unter anderem Licht wirkt.
Das ist bewusst eine gestalterische Vorschau. Der Kelvin-Wert steuert eine visuelle Farbtönung. Das Studio berechnet daraus weder UVB-Versorgung noch Wärme, Beleuchtungsstärke oder eine geeignete Beleuchtungsdauer. Die Pflanzenformen sind ebenfalls illustrative Modelle, keine botanisch geprüften Nachbildungen.
Der Modus „Ansicht genießen“ blendet die Seitenbereiche aus und gibt dem Entwurf mehr Raum. Nach den vielen kleinen Korrekturen kann man die Anordnung dadurch noch einmal als Ganzes betrachten. Ein Klick bringt die Werkzeuge zurück.
Eine schöne Perspektive reicht nicht
Eine Ansicht kann vieles verstecken. Von vorne wirkt eine Pflanze passend, während sie von oben fast die gesamte Tiefe einer Ecke belegt. Deshalb gibt es vier feste Kameraperspektiven: Perspektive, Front, Gegenseite und Draufsicht.
Die Draufsicht macht die Verteilung auf dem Boden lesbar. Die Frontansicht zeigt Höhen und Staffelung. Die beiden schrägen Ansichten helfen, die Anordnung räumlich zu verstehen. Eine einzelne Ansicht lässt sich als PNG speichern; das Exportpaket enthält vier Ansichten mit dem zugehörigen Plan und Kameradaten.
Entwürfe werden im jeweiligen Browser gespeichert. Bis zu zwölf benannte Varianten lassen sich dort verwalten und kopieren. Für die Sicherung oder den Wechsel auf ein anderes Gerät gibt es JSON-Export und -Import. Eine Anmeldung oder geräteübergreifende Synchronisierung gehört derzeit nicht zum Studio.
Auf dem kleinen Bildschirm neu sortieren
Auf dem Desktop sind Katalog, Szene und Eigenschaften gleichzeitig sichtbar. Auf einem schmalen Bildschirm braucht die 3D-Ansicht möglichst viel Platz. Der Katalog öffnet sich dort über „Einrichtung“, die Eigenschaften folgen unter der Szene. Licht und Ansichten bleiben über kompakte Bedienelemente erreichbar.
Die räumliche Arbeit bleibt der Mittelpunkt. Die ergänzenden Zahlenfelder sind weiterhin verfügbar, auch wenn sie nicht dauerhaft neben dem Becken stehen. Für den Artikel habe ich die öffentliche Beta zusätzlich in einer schmalen Browseransicht geöffnet; der Screenshot zeigt diesen tatsächlichen Zustand.
Einen 3D-Planer mit Three.js entwickeln
Der technische Aufbau kombiniert Astro, Preact, TypeScript und Three.js. Astro trägt die Website, Preact die interaktiven Bedienelemente, und Three.js zeichnet die WebGL-Szene. Die räumlichen Daten bleiben dabei unabhängig von den gerenderten Meshes.
Ein Datenmodell für Maße, Position und Export
Ein Ausschnitt aus dem TypeScript-Modell zeigt den Kern eines Einrichtungsobjekts:
type Size = {
w: number;
d: number;
h: number;
};
type Item = Size & {
id: string;
asset: string;
x: number;
y: number;
z: number;
yaw: number;
};
Die Größen und Positionen sind in Zentimetern gespeichert, yaw ist die Drehung in Grad. Im Plan werden X und Z von der linken beziehungsweise hinteren Innenwand aus gemessen. Für die zentrierte Three.js-Szene wird jeweils die halbe Beckenbreite oder -tiefe abgezogen. Eine Objekt-ID verbindet Formular, Plan und Szene. Dadurch arbeiten Zahlenfelder, Drag-and-drop, JSON-Export und Rückgängig mit denselben Daten.
Raycasting und Drag-and-drop ohne Kamerakonflikt
Für die Objektauswahl werden die Pointer-Koordinaten auf den Canvas bezogen und in den Bereich −1 bis 1 umgerechnet. Der Three.js Raycaster erzeugt daraus mit der Kamera einen Strahl; der erste Treffer liefert das ausgewählte Objekt. Ein Schnitt mit einer horizontalen Ebene bestimmt seine Zielposition beim Ziehen. In der Frontansicht verwendet das Studio stattdessen eine vertikale Ebene.
Während ein Objekt gezogen wird, sind die OrbitControls deaktiviert. Pointer Capture hält die laufende Geste am Canvas. Erst beim Loslassen wird die neue Position in den Plan und die Undo-Historie übernommen. So konkurrieren Kameradrehung und Objektbewegung nicht um dieselbe Geste.
Snapping, Modellgrößen und Rendern bei Bedarf
Beim Snapping wird die Zielposition zuerst auf das gewählte Raster gerundet und danach an die Grenzen des Innenraums angepasst. Die gedrehte Grundfläche eines Objekts geht in diese Begrenzung ein. Ein zu großes Objekt bleibt als Problem sichtbar; es wird nicht heimlich verkleinert.
Geladene GLB-Modelle bekommen einen einheitlichen Ursprung unten in der Mitte und werden auf ihre Planungsmaße skaliert. Pop- und Absetzeffekte liegen darunter auf einer separaten Transformationsgruppe. Der Renderer fordert neue Frames bei Änderungen und laufenden Animationen an. Im unveränderten Zustand braucht die Szene keine dauerhafte Render-Schleife.
Für Entwürfe nutzt das Studio localStorage. Die Daten gehören zum jeweiligen Browser und zur Website-Adresse; JSON-Export bleibt deshalb der Weg für Backups und Gerätewechsel. Die gleiche gestalterische Frage – wie technische Regeln ein angenehmes Bediengefühl ermöglichen – beschäftigt mich auch in Engineering Emotion: Designsysteme für Entwickler.
Was die Beta kann – und was als Nächstes interessant wäre
Die aktuelle Beta verbindet maßstäbliche Raumplanung, direkte Objektbearbeitung, vier Ansichten, lokale Entwürfe und Exporte mit einer ruhigeren, spielerischen Oberfläche. Technisch trägt Three.js die Szene. Ein Teil der Holz- und Steinmodelle stammt aus dem Kenney Nature Kit, das unter CC0 bereitsteht; Pflanzenformen, Korkversteck und Wasserschale werden im Projekt prozedural aufgebaut.
Das Ergebnis ist eine räumliche Entwurfshilfe. Die Prüfung einer geeigneten Haltung, Klimaberechnungen und Fertigungszeichnungen liegen außerhalb dieser Beta. Auch die experimentelle KI-Bildvorschau aus der lokalen Entwicklung gehört nicht zur öffentlichen Version. Die Abbildungen der Oberfläche in diesem Artikel sind echte Screenshots des 3D-Planers.
Für eine nächste Runde finde ich vor allem einen Moospinsel interessant: eine Fläche mit kleinen organischen Varianten gestalten, während ihre Ausdehnung weiter nachvollziehbar bleibt. Dazu könnten dezentes Nachschwingen von Blättern und unterschiedliche Materialklänge kommen. Das sind Ideen für die Weiterentwicklung, noch keine vorhandenen Funktionen.
Mich interessiert an diesem Projekt, wie viel Charakter ein Werkzeug durch seine Bedienung bekommen kann. Wer einen Stein verschiebt, bekommt eine klare Reaktion. Wer es genauer wissen will, findet die Maße daneben. Und wer kurz zufrieden ist, kann die Werkzeuge ausblenden und seinen kleinen Regenwald anschauen.
Häufige Fragen zum Terrarium-Planer und zur Entwicklung
Ist der Online-Terrarium-Planer kostenlos?
Ja. Die öffentliche Geckio-Beta läuft ohne Installation und ohne Benutzerkonto im Browser. Die Oberfläche und die Beispielnamen sind derzeit deutsch.
Kann ich eigene Terrariummaße und Einrichtungsgrößen verwenden?
Ja. Innenbreite, Tiefe, Höhe und Substrathöhe sind anpassbar. Für die vorhandenen Katalogobjekte lassen sich Größe, Position und Drehung bearbeiten. Die Beta bietet keinen Import eigener 3D-Modelle.
Wie kann ich meinen Terrarium-Entwurf speichern?
Das Studio speichert bis zu zwölf Entwürfe lokal im Browser. JSON-Dateien lassen sich exportieren und später wieder importieren. Ein PNG zeigt den Entwurf; die JSON-Datei erhält die bearbeitbaren Planungsdaten.
Simuliert der Planer Temperatur, UVB oder Pflanzenwachstum?
Nein. Er unterstützt die räumliche Einrichtung und eine visuelle Lichtvorschau. Geeignete Haltungsbedingungen müssen separat geplant und am realen Becken geprüft werden.
Welche Technik steckt hinter dem 3D-Konfigurator?
Three.js rendert die Szene mit WebGL; Preact steuert die Oberfläche, TypeScript beschreibt die Planungsdaten. Raycasting, Snapping und eine getrennte Vorschau während des Ziehens verbinden die direkte Bedienung mit präzisen Maßen und einzelnen Undo-Schritten.
Planungssoftware aus Sicht der Community
Die Frage taucht auch außerhalb dieses Projekts auf. In Software for planning a vivarium/terrarium sucht ein Orchideenfreund ein 3D-Werkzeug, das seine Einrichtung räumlich verständlich macht und keine lange Einarbeitung verlangt. Das beschreibt gut die Lücke zwischen einer Papierskizze und einer vollständigen Modellierungsanwendung.
Die Diskussion zur Steam-Veröffentlichung von Terrarium Builder stellt eine weitere Frage: Wobei soll ein digitales Terrarium helfen? Kommentare nennen das Ausprobieren eines Entwurfs vor dem Materialkauf, fragen aber auch nach Realismus und Pflanzenwachstum. Das sind unterschiedliche Aufgaben. Terrarium Studio konzentriert sich auf Proportionen, Platzierung und bearbeitbare Entwürfe; eine schöne Szene allein kann kein Ökosystem prüfen.
Beide Diskussionen behandeln andere Werkzeuge und die Planungswünsche ihrer Nutzer. Sie sind eine passende Ergänzung zu diesem Entwicklungsbericht.
Terrarium Studio Beta ausprobieren →
Titelbild: eine redaktionelle Illustration. Projektstand und Screenshots: 12. Oktober 2026. Die Screenshots lassen sich per Klick in voller Größe öffnen.
