Inizio Rapido

Benvenuto nel Wonderland Engine. Ti preghiamo di installare il Wonderland Editor prima di proseguire con questo tutorial.

Crea un Progetto 

Inserisci un nome a tua scelta e crea il progetto tramite il “Project Wizard” che lancia quando avvii l’editor per la prima volta.

Scegli il template “VR”.

Ti verrà presentato un progetto base con la configurazione per il teletrasporto VR impostata. Abbastanza noioso! Dovremmo aggiungere un asset qui.

In basso a sinistra trovi il “Asset Browser”. Mostra il contenuto della directory del progetto. Tutti gli asset del progetto dovrebbero essere posizionati in questa directory.

Esegui nel Browser 

Per esportare il progetto e visualizzarlo nel browser, clicca sulla freccia verde in alto nella finestra:

Ora, ogni volta che esportiamo il progetto (cliccando l’icona 🔨), il browser si ricaricherà automaticamente con le nostre modifiche.

Rimuovi Oggetti 

Con il template VR, otteniamo alcune luci, oggetti e, soprattutto: la configurazione del giocatore.

Non abbiamo bisogno di tutti gli oggetti. Eliminali selezionandoli con un clic sinistro del mouse e poi, nel “Scene Outline”, o premi il tasto “Canc” o seleziona “Elimina” con il tasto destro.

Elimina questi:

• Cube
• Sphere
• Cone
• Panel

Assicurati di tenere:

• Player
• Light
• Light.000
• 3DCursorHitLeft / 3DCursorHitRight
• TeleportIndicator

Modifica il Mesh di Navigazione 

Il piano che abbiamo mantenuto ha un componente “collision” attaccato, che definisce la forma dell’oggetto per collisioni e ray casts.

In questo caso è utilizzato per la navigazione tramite teletrasporto. Nel prossimo passaggio, aggiungeremo una scena che ha già un pavimento, quindi rimuoveremo il mesh, ma terremo la collisione.

Clicca sul piano, quindi nei “Properties” clicca ⋮ (punti verticali) sul componente “mesh” e infine “Delete”:

Vedrai che le linee verdi per il componente collision sono mantenute, mentre il mesh per il rendering è scomparso. Nel browser, questa visualizzazione delle collisioni non appare per impostazione predefinita.

Aggiungi un Asset 

Crea una nuova cartella assets cliccando con il tasto destro sulla directory principale e selezionando “Nuova cartella”.

Scarica low_poly_winter_scene.zip ed estrai i file o trascinali nella nuova cartella nel Asset Browser. Se usi WinRAR, puoi anche trascinare e rilasciare i file direttamente da WinRAR.

Questa bellissima scena è stata creata da “EdwinRC” e può essere trovata su Sketchfab.

Per importare la scena, trascina e rilascia scene.gltf (non il scene.bin) nella “Scene View”. In alternativa, puoi trascinarla direttamente su un oggetto esistente nel “Scene Outline”.

Guarda Intorno 

Per guardarti intorno nella “Scene View”, tieni premuto il tasto destro del mouse mentre muovi il mouse. Usa i tasti W-A-S-D per muoverti avanti, sinistra, indietro e destra, mantenendo premuto il tasto destro del mouse. Per aumentare la velocità, scorri verso l’alto mentre mantieni premuto il tasto destro del mouse.

Puoi anche tenere premuto il pulsante centrale del mouse (su MacOS, tieni premuto Alt) per orbitare attorno alla scena.

Posiziona le Luci 

Le luci ora sembrano fuori posto per questa nuova scena.

Per spostarle in un punto utile, seleziona una nel “Scene Outline” e usa le maniglie del “translation gizmo” per trascinare la luce nel 3D della scena.

Se non hai le frecce per la traduzione, puoi cambiare il tipo di gizmo usando i seguenti tasti:

• G (“Grab”): gizmo di posizione
• R (“Rotate”): gizmo di rotazione
• S (“Scale”): gizmo di scala

Doppio tap G per alternare la traduzione in spazio locale o globale.

Puoi anche usare la barra degli strumenti in alto nella Scene View:

Proprietà dei Componenti 

L’oggetto “Light” emette luce perché ha un componente “light” attaccato. Puoi rendere la luce più luminosa riducendo la proprietà “intensity” del componente light:

Riepilogo 

Anche se questa scena ha solo pochi oggetti, Wonderland Engine è ottimo nel rendering di molti mesh diversi. Vedi l’Esempio di Ottimizzazione della Scena.

Puoi continuare aggiungendo comportamenti personalizzati con i tuoi componenti JavaScript.

Oppure potresti voler aggiungere il supporto per controller VR.