Schnellstart

  1
  2Willkommen bei Wonderland Engine. Bitte [**installiere den Wonderland Editor**](









  https://wonderlandengine.com/de/getting-started/installing/

), bevor Du mit diesem Tutorial fortfährst.
  3
  4

      
Konto erstellen
  

    




  5
  6







  7
  8## Ein Projekt erstellen
  9
 10Gib einen Projektnamen Deiner Wahl ein und erstelle das Projekt über den "Projektassistenten", der beim ersten Start des Editors erscheint.
 11
 12Wähle das **"VR"-Template**.
 13
 14![Screenshot: Loslegen - Projektassistent](images/getting-started-project-wizard.png)
 15
 16Du startest mit einem Basisprojekt, das VR-Teleportation eingerichtet hat. Ziemlich langweilig! Wir sollten hier ein Asset hinzufügen.
 17
 18![Screenshot: Loslegen - Leeres Projekt](images/getting-started-empty-project.png)
 19
 20Unten links siehst Du den "Asset Browser". Er zeigt den Inhalt des Projektverzeichnisses an. Alle Assets für das Projekt sollten in dieses Verzeichnis gelegt werden.
 21
 22## Im Browser ausführen
 23
 24Um das Projekt zu packen und im Browser anzuzeigen, klicke auf den grünen Pfeil oben im Fenster:
 25
 26![Screenshot: Loslegen - Im Browser ausführen](images/getting-started-run-in-browser.png)
 27
 28


 29
 30Jedes Mal, wenn wir das Projekt "packen" (durch Klicken auf das 🔨-Symbol), lädt der Browser automatisch mit unseren Änderungen neu.
 31
 32![Screenshot: Loslegen - Projekt packen](images/getting-started-package.png)
 33
 34## Objekte entfernen
 35
 36Mit dem VR-Template bekommen wir einige Lichter, Objekte und am wichtigsten: die Spielereinrichtung.
 37
 38Wir brauchen nicht alle Objekte. Lösche sie, indem Du sie mit Linksklick auswählst und dann entweder durch einen Rechtsklick in der "Szenenübersicht" oder durch Drücken der "Entf"-Taste.
 39
 40Lösche diese:
 41
 42- Würfel
 43- Kugel
 44- Kegel
 45- Tafel
 46
 47Behalte sicher:
 48
 49- Spieler
 50- Licht
 51- Licht.000
 52- 3DCursorHitLeft / 3DCursorHitRight
 53- Teleportanzeige
 54
 55









  

  
    
   


 56
 57### Navigation Mesh bearbeiten
 58
 59Die Ebene, die wir behalten haben, hat eine "collision"-Komponente, die die Form des Objekts für Kollisionen und Strahlenabfragen definiert.
 60
 61In diesem Fall wird sie für Teleport-Navigation genutzt. Im nächsten Schritt fügen wir eine Szene hinzu, die bereits einen Boden hat, also entfernen wir das Mesh, behalten aber die Kollision.
 62
 63Klicke auf die Ebene, dann in den "Eigenschaften" ⋮ (vertikale Punkte) auf der "mesh"-Komponente und schließlich "Löschen":
 64
 65









  

  
    
   


 66
 67Du wirst sehen, dass die grünen Linien für die Kollisionskomponente beibehalten werden, während das Render-Mesh verschwindet. Im Browser wird diese Kollisionsvisualisierung standardmäßig nicht angezeigt.
 68
 69## Ein Asset hinzufügen
 70
 71Erstelle einen neuen Ordner `assets`, indem Du mit der rechten Maustaste auf das Stammverzeichnis klickst und "Neuer Ordner" wählst.
 72
 73![Screenshot: Loslegen - Asset-Browser Kontextmenü](images/getting-started-asset-browser.png)
 74
 75Lade [low_poly_winter_scene.zip](/files/low_poly_winter_scene.zip) herunter und entpacke sie oder ziehe die Dateien in den neuen Ordner im Asset Browser. Wenn Du WinRAR verwendest, kannst Du die Dateien auch direkt aus WinRAR ziehen und ablegen.
 76
 77Diese schöne Szene wurde von "EdwinRC" erstellt und kann [auf Sketchfab gefunden werden](https://sketchfab.com/3d-models/low-poly-winter-scene-2ffe1ed449414cc184078dd1e2882284).
 78![Screenshot: Loslegen - Asset-Browser](images/getting-started-asset-browser-scene-files.png)
 79
 80Um die Szene zu importieren, ziehe einfach `scene.gltf` (_nicht_ `scene.bin`) in die "Szenenansicht". Alternativ kannst Du sie direkt auf ein bestehendes Objekt in der "Szenenübersicht" ziehen.
 81
 82![Screenshot: Loslegen - Importierte Szene](images/getting-started-imported-scene.png)
 83
 84


 85
 86### Umschauen
 87
 88Um dich in der "Szenenansicht" umzusehen, **halte die _rechte Maustaste_** gedrückt, während Du die Maus bewegst. Verwende die Tasten W-A-S-D, um vorwärts, links, zurück 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.
 89
 90Du kannst auch die Mitteltaste der Maus gedrückt halten (halte Alt auf MacOS), um um die Szene zu schwenken.
 91
 92### Lichter positionieren
 93
 94Die Lichter wirken jetzt fehl am Platz für diese neue Szene.
 95
 96Um sie sinnvoll zu platzieren, wähle eines in der "Szenenübersicht" und verwende die "Translation Gizmo"-Griffe, um das Licht in der 3D-Szene zu verschieben.
 97
 98![Screenshot: Loslegen - Licht positionieren](images/getting-started-light-positioning.png)
 99
100Falls die Pfeile für die Translation fehlen, kannst Du den Gizmo-Typ mit den folgenden Tasten wechseln:
101
102- **G** ("Greifen"): Positions-Gizmo
103- **R** ("Rotieren"): Rotations-Gizmo
104- **S** ("Skalieren"): Skalierungs-Gizmo
105
106Doppelt **G** drücken, um zwischen Translation in lokalen oder Welt-Koordinaten zu wechseln.
107
108Du kannst auch die Symbolleiste oben in der Szenenansicht nutzen:
109
110![Screenshot: Loslegen - Gizmo-Symbolleiste](images/getting-started-gizmos.png)
111
112## Komponenten-Eigenschaften
113
114Das "Licht"-Objekt beleuchtet, weil es eine "light"-Komponente angehängt hat.
115Du kannst die Helligkeit des Lichts durch Ändern der "intensity"-Eigenschaft der Lichtkomponente erhöhen:
116
117![Screenshot: Loslegen - Lichtkomponenten-Eigenschaften](images/getting-started-light-properties.png)
118
119## Zusammenfassung
120
121Auch wenn diese Szene nur einige wenige Objekte enthält, ist Wonderland Engine ausgezeichnet darin, _viele_ verschiedene Meshes zu rendern. Siehe das [Szenenoptimierungs-Beispiel](









  https://wonderlandengine.com/de/showcase/scene-optimization/

).
122
123Du kannst fortfahren, indem Du benutzerdefiniertes Verhalten [mit Deinen eigenen JavaScript-Komponenten](









  https://wonderlandengine.com/de/getting-started/quick-start-js/

) hinzufügst.
124
125Oder vielleicht möchtest Du [VR-Controller-Unterstützung hinzufügen](









  https://wonderlandengine.com/de/getting-started/quick-start-vr/

).