Live-Demo:
https://hiteshsahu.com/lab/periodic-table/
Die Idee bestand darin, das Periodensystem visueller und erforschbarer zu machen, anstatt nur ein statisches Gitter.
Jedes Element wird in einer 3D-Szene platziert. Wenn Sie eines auswählen, können Sie:
- Sehen Sie sich ein echtes Polymesh mit strukturierten Elementen an
- Atomstrukturmodell mit Neutron, Proton und Elektron
- Sehen Sie sich die wichtigsten Eigenschaften und grundlegenden Informationen an
- Navigieren Sie mit interaktiven Kamerasteuerungen durch die Szene (Spielmodus und freier Modus).
Dies war eine unterhaltsame Herausforderung in Bezug auf Szenenmanagement, Netzgenerierung, Interaktionshandhabung und Leistungsoptimierung in WebGL. Die Verwaltung von Layout und Reaktionsfähigkeit im 3D-Raum unterscheidet sich deutlich von der herkömmlichen Frontend-Arbeit.
Im Spielekameramodus können Sie wie in jedem FPS-Shooter-Spiel laufen, rennen und auf dem Boden springen.
Würde mich über Feedback freuen zu:
- Ideen zur Leistungsoptimierung
- UI/UX-Verbesserungen für die 3D-Navigation
- Möglichkeiten, die atomare Visualisierung genauer zu machen
Bei technischen Fragen zur Umsetzung stehe ich Ihnen gerne zur Verfügung.
Von Decent_Pirate239