Willkommen bei Wonderland Engine. Bitte [**installiere den Wonderland Editor**](/getting-started/installing/), bevor Du mit diesem Tutorial fortfährst.
<Button label="Konto erstellen" link="/signup/" />
<PromoCard src="/images/wonderland-engine-foundations-course-thumbnail.webp" alt="Wonderland Engine Grundlagenkurs" link="https://learn.wonderlandengine.com/?utm_source=website&utm_medium=quick_start">
**Schau Dir unseren Videokurs an!**
Die kostenlose Probestunde "Dein erstes Wonderland Engine Projekt" ist ein großartiger Einstieg.
[→ Wonderland Learn](https://learn.wonderlandengine.com/?utm_source=website&utm_medium=quick_start)
</PromoCard>
## 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**.
Du beginnst mit einem Basisprojekt, das VR-Teleportation eingerichtet hat. Ziemlich langweilig! Wir sollten hier ein Asset hinzufügen.
Unten 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.
## Im Browser ausführen
Um das Projekt zu packen und im Browser anzuzeigen, klicke auf den grünen Pfeil oben im Fenster:
<Note>
**Browser- & Geräteunterstützung**
Wonderland Engine läuft auf jedem Browser, [der WebGL2 unterstützt](https://caniuse.com/webgl2).
Der VR-Modus funktioniert auf jedem Gerät/Browser, [der WebXR unterstützt](https://caniuse.com/webxr).
</Note>
Wann immer wir das Projekt "packen" (durch Klicken auf das 🔨-Symbol), lädt der Browser die Änderungen automatisch neu.
## Objekte entfernen
Mit dem VR-Template erhalten wir einige Lichter, Objekte und das Wichtigste: die Spielereinrichtung.
Wir 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.
Lösche diese:
- Würfel
- Kugel
- Kegel
- Tafel
Behalte Folgendes:
- Spieler
- Licht
- Licht.000
- 3DCursorHitLeft / 3DCursorHitRight
- Teleportanzeige
<Image src="getting-started-delete-object.png" alt="Screenshot: Loslegen - Objekt löschen" style="max-width: 300px" />
### Navigation Mesh bearbeiten
Die Ebene, die wir behalten haben, hat eine "collision"-Komponente, die die Form des Objekts für Kollisionen und Raycasts definiert.
In 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.
Klicke auf die Ebene, dann in den "Eigenschaften" ⋮ (vertikale Punkte) auf der "mesh"-Komponente und schließlich "Löschen":
<Image src="getting-started-delete-mesh-component.png" alt="Screenshot: Loslegen - Mesh-Komponente löschen" style="max-width: 400px" />
Du 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.
## Ein Asset hinzufügen
Erstelle einen neuen Ordner `assets`, indem Du mit der rechten Maustaste auf das Stammverzeichnis klickst und "Neuer Ordner" wählst.
Lade [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.
Diese schöne Szene wurde von "EdwinRC" erstellt und kann [auf Sketchfab gefunden werden](https://sketchfab.com/3d-models/low-poly-winter-scene-2ffe1ed449414cc184078dd1e2882284).
Um 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.
<Note>Um die Änderungen im Browser zu sehen, stelle sicher, dass Du das Projekt packst, indem Du auf das 🔨-Symbol über der "Szenenansicht" klickst.</Note>
### Umschauen
Um 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.
Du kannst auch die Mitteltaste der Maus gedrückt halten (halte Alt auf MacOS), um um die Szene zu schwenken.
### Lichter positionieren
Die Lichter wirken jetzt fehl am Platz für diese neue Szene.
Um 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.
Falls die Pfeile für die Translation fehlen, kannst Du den Gizmo-Typ mit den folgenden Tasten wechseln:
- **G** ("Greifen"): Positions-Gizmo
- **R** ("Rotieren"): Rotations-Gizmo
- **S** ("Skalieren"): Skalierungs-Gizmo
Doppelt **G** drücken, um zwischen Translation in lokalen oder Welt-Koordinaten zu wechseln.
Du kannst auch die Symbolleiste oben in der Szenenansicht nutzen:
## Komponenten-Eigenschaften
Das "Licht"-Objekt beleuchtet, weil es eine "light"-Komponente angehängt hat. Du kannst die Helligkeit des Lichts durch Ändern der "intensity"-Eigenschaft der Lichtkomponente erhöhen:
## Zusammenfassung
Auch wenn diese Szene nur einige wenige Objekte enthält, ist Wonderland Engine ausgezeichnet darin, _viele_ verschiedene Meshes zu rendern. Siehe das [Szenenoptimierungs-Beispiel](/showcase/scene-optimization/).
Du kannst fortfahren, indem Du benutzerdefiniertes Verhalten [mit Deinen eigenen JavaScript-Komponenten](/getting-started/quick-start-js/) hinzufügst.
Oder vielleicht möchtest Du [VR-Controller-Unterstützung hinzufügen](/getting-started/quick-start-vr/).