Schnellstart

Willkommen bei Wonderland Engine. Bitte installiere den Wonderland Editor bevor du mit diesem Tutorial fortfährst.

Konto erstellen

Ein Projekt erstellen 

Gib einen Projektnamen deiner Wahl ein und erstelle das Projekt über den “Projektassistenten”, der beim ersten Start des Editors erscheint.

Wähle das “VR”-Template.

Schnellstart

Du erhältst ein Basisprojekt, das VR-Teleportation eingerichtet hat. Ziemlich langweilig! Wir sollten hier ein Asset hinzufügen.

Schnellstart

Unten links siehst du den “Asset-Browser”. Er zeigt die Inhalte des Projektverzeichnisses. Alle Assets für das Projekt sollten in dieses Verzeichnis gelegt werden.

Im Browser ausführen 

Um das Projekt zu paketieren und es im Browser anzuzeigen, klicke auf den grünen Pfeil oben im Fenster:

Schnellstart

Jetzt, jedes Mal, wenn wir das Projekt “paketieren” (durch Klicken auf das 🔨-Symbol), wird der Browser automatisch mit unseren Änderungen neu geladen.

Schnellstart

Objekte entfernen 

Mit dem VR-Template erhalten wir einige Lichter, Objekte und vor allem: die Spielereinrichtung.

Wir benötigen nicht alle Objekte. Lösche sie, indem du sie mit Linksklick auswählst und dann entweder durch Rechtsklick im “Szenenübersicht”, oder durch Drücken der “Entf”-Taste.

Lösche diese:

  • Würfel
  • Kugel
  • Kegel
  • Tafel

Stelle sicher, dass du beibehältst:

  • Spieler
  • Licht
  • Licht.000
  • 3DCursorHitLeft / 3DCursorHitRight
  • Teleportanzeige
Schnellstart

Die Ebene, die wir behalten haben, hat eine “collision”-Komponente angehängt, die die Form des Objekts für Kollisionen und Strahlabfragen definiert.

In diesem Fall wird sie für die Teleportation genutzt. Im nächsten Schritt fügen wir eine Szene hinzu, die bereits einen Boden hat, daher werden wir das Mesh entfernen, aber die Kollision behalten.

Klicke auf die Ebene, dann in den “Eigenschaften” auf das ⋮ (vertikale Punkte) der “mesh”-Komponente und schließlich auf “Löschen”:

Schnellstart

Du wirst sehen, dass die grünen Linien für die Kollisionskomponente beibehalten werden, während das Mesh für die Darstellung verschwunden ist. Im Browser wird diese Kollisionsvisualisierung standardmäßig nicht angezeigt.

Ein Asset hinzufügen 

Erstelle einen neuen Ordner assets, indem du mit der rechten Maustaste auf das Stammverzeichnis klickst und “Neuer Ordner” wählst.

Schnellstart

Lade low_poly_winter_scene.zip herunter und extrahiere sie oder ziehe die Dateien in diesen neuen Ordner im Asset-Browser. Wenn du WinRAR verwendest, kannst du die Dateien auch direkt aus WinRAR ziehen und ablegen.

Diese schöne Szene wurde von “EdwinRC” erstellt und kann auf Sketchfab gefunden werden.

Schnellstart

Um die Szene zu importieren, ziehe einfach scene.gltf (nicht scene.bin) in die “Szenenansicht”. Alternativ kannst du es direkt auf ein bestehendes Objekt in der “Szenenübersicht” ziehen.

Schnellstart

Umschauen 

Um dich in der “Szenenansicht” umzuschauen, halte die rechte Maustaste gedrückt, während du die Maus bewegst. Verwende die Tasten W-A-S-D, um vorwärts, links, nach hinten und rechts zu gehen, während du die rechte Maustaste weiterhin gedrückt hältst. Um die Geschwindigkeit zu erhöhen, scrolle nach oben, während du die rechte Maustaste weiterhin gedrückt hältst.

Du kannst auch den Mausradknopf gedrückt halten (halte Alt auf MacOS), um um die Szene herumzuschwenken.

Lichter positionieren 

Die Lichter wirken jetzt fehl am Platz für diese neue Szene.

Um sie an nützliche Orte zu bewegen, wähle eines in der “Szenenübersicht” und verwende die “Translation-Gizmo”-Griffe, um das Licht in der 3D-Szene zu ziehen.

Schnellstart

Wenn du die Pfeile für die Translation nicht hast, kannst du den Gizmo-Typ mit den folgenden Tasten wechseln:

  • G (“Greifen”): Positions-Gizmo
  • R (“Drehen”): Rotations-Gizmo
  • S (“Skalieren”): Skalierungs-Gizmo

Doppeltes Tippen von G schaltet zwischen Translation in lokalem vs. Weltraum um.

Du kannst auch die Symbolleiste oben in der Szenenansicht verwenden:

Schnellstart

Komponenten-Eigenschaften 

Das “Licht”-Objekt macht Licht, weil es eine “light”-Komponente angehängt hat. Du kannst das Licht heller machen, indem du den “intensity”-Eigenschaft der Lichtkomponente reduzierst:

Schnellstart

Zusammenfassung 

Während diese Szene nur wenige Objekte hat, ist Wonderland Engine großartig im Rendern von vielen verschiedenen Meshes. Siehe das Szenenoptimierungs-Beispiel.

Du kannst fortfahren, indem du benutzerdefiniertes Verhalten mit deinen eigenen JavaScript-Komponenten hinzufügst.

Oder vielleicht möchtest du VR-Controller-Unterstützung hinzufügen.