Autore: Jared Liu
Provalo dal vivo Su questo progetto
Planet Maker è un editor di pianeti 3D nel browser, progettato per funzionare prima di tutto offline: scegli uno dei nove mondi, da Mercurio alla Luna, oppure carica una tua mappa 2:1 per creare un nuovo pianeta; scolpisci il rilievo, regola nuvole e atmosfera, orienta il sole, quindi colloca sulla sfera oggetti 3D, segnaposto e testo billboard. Ogni elemento si allinea automaticamente alla superficie curva.
Sono inclusi venti modelli CC0 leggeri e un accesso integrato alla creazione con Tripo: genera un modello personalizzato in Tripo, carica il GLB e fai clic sulla sfera per posizionarlo. Tutto resta nel browser (nessun account, nessun backend); i mondi finiti si esportano come istantanee PNG, scene GLB o progetti .planet.json nuovamente modificabili. Dopo l’installazione come PWA e il download della libreria offline, puoi continuare a creare senza alcuna connessione.
Punti salienti
- Parti da nove mondi — da Mercurio alla Luna — oppure carica un’immagine qualsiasi, ritagliata in locale come mappa di superficie equirettangolare 2:1
- Rilievo della superficie, rugosità, nuvole, atmosfera, rotazione automatica e direzione del sole sono tutti regolabili tramite cursori
- Venti modelli CC0 integrati; genera un modello personalizzato con Tripo, carica il GLB e fai clic sulla sfera per posizionarlo, sempre allineato alla superficie
- Esporta con un clic un’istantanea PNG, una scena GLB o un progetto .planet.json nuovamente modificabile; installa l’app come PWA e continua a creare completamente offline
Analisi tecnica
Pipeline degli oggetti GLB · output Tripo direttamente sulla sfera
Il pannello Oggetti include un accesso integrato alla creazione con Tripo: genera un modello personalizzato in Tripo, carica il GLB e funziona subito. Ogni GLB, compresi i 20 asset CC0 in dotazione, viene prima normalizzato in base al bounding box Box3: centrato, ancorato in basso all’origine e scalato uniformemente in base al lato più lungo. Al posizionamento, le coordinate sferiche vengono convertite in posizione e quaternione, così un clic posa l’oggetto a filo del terreno a qualsiasi latitudine.
Rendering del pianeta · una texture, materiali fisici
L’intero pianeta usa un’unica mappa 2:1: meshPhysicalMaterial la impiega sia come mappa colore sia come bump map (bumpScale è il cursore del rilievo). Le nuvole vivono su un guscio separato con alphaMap (Venere usa un caso speciale opaco), l’atmosfera è un guscio luminoso additivo in BackSide e Saturno aggiunge una ringGeometry; azimut ed elevazione del sole controllano la luce direzionale e le ombre la seguono.
Superfici personalizzate · elaborate interamente in locale
Le immagini caricate non raggiungono mai un server: createImageBitmap legge il file, lo ritaglia al centro in rapporto 2:1, limita la larghezza a 2048px, quindi canvas codifica un webp in localStorage. I GLB personalizzati caricati usano objectURL in memoria e vengono deliberatamente esclusi dal JSON del progetto. Nessun account, nessun backend: i progetti risiedono nei dati del browser.
Prestazioni e offline · rendering su richiesta + PWA
Il frameloop gira solo quando serve: disattivando la rotazione automatica passa alla modalità demand, nascondendo la scheda si arresta del tutto e sotto carico riduce automaticamente il dpr. vite-plugin-pwa precarica nella cache la shell dell’app e gli asset iniziali, mentre «Scarica libreria offline» nel pannello Esporta memorizza nella cache tutti i nove pianeti e i venti modelli: la creazione continua anche senza alcuna connessione.
