Autor: Jared Liu
Live ausprobieren Über dieses Projekt
Planet Maker ist ein Offline-first-3D-Planeten-Editor im Browser: Wählen Sie eine von neun Welten zwischen Merkur und Mond oder laden Sie Ihre eigene 2:1-Karte hoch, um einen neuen Planeten anzulegen; formen Sie das Relief, stimmen Sie Wolken und Atmosphäre ab, richten Sie die Sonne aus und platzieren Sie anschließend 3D-Objekte, Stecknadeln und Billboard-Text auf der Kugel — alles richtet sich automatisch an der gekrümmten Oberfläche aus.
Zwanzig schlanke CC0-Modelle sind enthalten, ebenso ein integrierter Tripo-Einstieg: Erzeugen Sie in Tripo ein eigenes Modell, laden Sie das GLB hoch und klicken Sie zum Platzieren auf die Kugel. Alles bleibt im Browser (kein Konto, kein Backend); fertige Welten lassen sich als PNG-Schnappschüsse, GLB-Szenen oder weiterbearbeitbare .planet.json-Projekte exportieren. Nach der Installation als PWA und dem Download der Offline-Bibliothek können Sie ganz ohne Verbindung weiterarbeiten.
Highlights
- Beginnen Sie mit neun Welten — von Merkur bis zum Mond — oder laden Sie ein beliebiges Bild hoch, das lokal auf eine äquirektanguläre 2:1-Oberflächenkarte zugeschnitten wird
- Oberflächenrelief, Rauheit, Wolken, Atmosphäre, automatische Rotation und Sonnenrichtung lassen sich vollständig per Schieberegler einstellen
- Zwanzig CC0-Modelle sind integriert; erstellen Sie mit Tripo ein eigenes Modell, laden Sie das GLB hoch und klicken Sie zum Platzieren auf die Kugel — es wird stets bündig zur Oberfläche ausgerichtet
- Exportieren Sie mit einem Klick einen PNG-Schnappschuss, eine GLB-Szene oder ein weiterbearbeitbares .planet.json-Projekt; als PWA installiert können Sie vollständig offline weiterarbeiten
Technische Analyse
GLB-Objekt-Pipeline · Tripo-Ausgabe direkt auf die Kugel
Das Objekt-Panel enthält einen integrierten Einstieg zur Erstellung mit Tripo — erzeugen Sie in Tripo ein eigenes Modell, laden Sie das GLB hoch, und es funktioniert sofort. Jedes GLB (einschließlich der 20 mitgelieferten CC0-Assets) wird zunächst anhand seiner Box3-Bounding-Box normalisiert: zentriert, mit der Unterseite am Ursprung verankert und anhand der längsten Kante gleichmäßig skaliert. Beim Platzieren werden Kugelkoordinaten in Position und Quaternion umgerechnet, sodass ein Klick das Objekt an jedem Breitengrad bündig auf den Boden setzt.
Planeten-Rendering · eine Textur, physikalische Materialien
Der gesamte Planet nutzt eine einzige 2:1-Karte: meshPhysicalMaterial verwendet sie zugleich als Farb- und Bump-Map (bumpScale ist der Reliefregler). Wolken liegen auf einer separaten Hülle mit alphaMap (Venus erhält als Sonderfall eine deckende Hülle), die Atmosphäre ist eine additive Leuchthülle mit BackSide, und Saturn ergänzt eine ringGeometry; Sonnenazimut und -höhe steuern das gerichtete Licht, die Schatten folgen.
Eigene Oberflächen · vollständig lokal verarbeitet
Hochgeladene Bilder erreichen nie einen Server: createImageBitmap liest die Datei ein, beschneidet sie zentriert auf 2:1, begrenzt die Breite auf 2048px und lässt canvas anschließend ein webp für localStorage codieren. Hochgeladene eigene GLBs verwenden objectURL-Adressen im Arbeitsspeicher und werden bewusst nicht in das Projekt-JSON aufgenommen. Kein Konto, kein Backend — Projekte bleiben bei den Browserdaten.
Leistung und Offlinebetrieb · Rendering bei Bedarf + PWA
Die frameloop läuft nur bei Bedarf: Wird die automatische Rotation ausgeschaltet, wechselt sie in den demand-Modus; wird der Tab ausgeblendet, hält sie vollständig an, und unter Last wird dpr automatisch reduziert. vite-plugin-pwa speichert App-Shell und Start-Assets vorab; „Offline-Bibliothek herunterladen“ im Export-Panel legt alle neun Planeten und zwanzig Modelle im Cache ab — Planetenbau funktioniert ganz ohne Verbindung weiter.
