Threejs3D Code Play

Threejs3D Code Play hilft dir, Three.js zu lernen, indem du Code bearbeitest und das Ergebnis als interaktive 3D-Szene siehst. Beginne mit einem Beispiel, ändere dessen HTML und JavaScript und führe deine Version anschließend in der App aus.

LERNEN DURCH ARBEITENDE SZENEN

Entdecke 99 Beispiele in Lernexperimenten und vordefinierten animierten Szenen. Beginne mit Formen, Materialien, Beleuchtung und Kameras und untersuche anschließend Partikel, Shader und Interaktionen. Versuche dich an einem Sonnensystem, Meereswellen oder einer animierten abstrakten Szene, wenn du einen größeren Ausgangspunkt benötigst.

Fünf Lernpfade gliedern die Beispiele in Grundlagen, Geometrie, Farbe und Licht, Bewegung und einen kreativen Workshop. Markiere Lektionen als abgeschlossen, setze einen Lernpfad fort, speichere hilfreiche Beispiele und kehre zu kürzlich geöffneten Szenen zurück.

BEARBEITEN, AUSFÜHREN UND ANALYSIEREN

Öffne ein Beispiel im Code-Editor oder beginne ein neues Projekt mit einem bereits vorhandenen Three.js-Import. Nutze Syntaxhervorhebung, Rückgängig- und Wiederherstellen-Funktionen, Suchen und Ersetzen sowie die Funktion „Gehe zu Zeile“, während du arbeitest. Wechsle zur Ausführungsvorschau, um den aktuellen Code zu sehen und Konsolenmeldungen oder Fehler zu untersuchen.

Ziehen Sie die Szene per Drag & Drop und zoomen Sie mit zwei Fingern in der Vorschau. Bei Szenen, die diese Funktion unterstützen, können Sie mit den Live-Steuerelementen Farbe, Animationsgeschwindigkeit, Beleuchtung, Geometrie sowie einfarbige oder Farbverlauf-Hintergründe anpassen. Die verfügbaren Steuerelemente hängen von der jeweiligen Szene ab.

SPEICHERN SIE IHRE EXPERIMENTE

Speichern Sie benannte Projekte und öffnen Sie sie später wieder unter „Ihre Projekte“. Öffnen Sie HTML-Dateien, um Ihre Arbeit fortzusetzen, oder verwenden Sie „Speichern unter“, um eine separate Kopie zu erstellen.

Exportieren oder teilen Sie ein Projekt als HTML oder ZIP-Datei. Exporte enthalten die bekannten, mitgelieferten Three.js-Bibliotheken; benutzerdefinierte externe Ressourcen bleiben extern. Entpacken Sie eine ZIP-Datei und stellen Sie den Ordner per HTTP bereit, um das Projekt außerhalb der App zu öffnen.

ANIMIEREN SIE IHR HINTERGRUNDBILD

Auf kompatiblen Android-Geräten mit der erforderlichen nativen Unterstützung können Sie eine animierte Szene an die Live-Hintergrundbild-Vorschau des Systems senden und Ihre Auswahl dort bestätigen. Die verfügbaren Speicherorte für Hintergrundbilder hängen vom Gerät ab.

Diese App richtet sich an Studierende, Hobbyprogrammierer und Webentwickler, die 3D-Programmierung anhand kleiner Experimente üben möchten. Die mitgelieferten Beispiele verwenden lokale Bibliotheken; benutzerdefinierte externe Ressourcen und Werbung benötigen möglicherweise eine Internetverbindung. Die App enthält Werbung.