Inizio Rapido

Benvenuto nel Wonderland Engine. Prima di continuare con questo tutorial, ti invitiamo a installare il Wonderland Editor.

Crea un Progetto 

Inserisci il nome del progetto che preferisci e crealo tramite il “Project Wizard” che si avvia quando l’editor viene aperto per la prima volta.

Scegli il template “VR”.

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

In basso a sinistra trovi l’“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 cancellali cliccando con il tasto destro nel “Scene Outline” o premendo il tasto “Canc” sulla tastiera.

Elimina questi oggetti:

• Cube
• Sphere
• Cone
• Panel

Assicurati di conservare:

• 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 già dotata di pavimento, quindi rimuoveremo il mesh, ma terremo la collisione.

Clicca sul piano, poi nei “Properties” clicca sui tre puntini verticali sul componente “mesh”, infine “Delete”:

Vedrai che le linee verdi per il componente collision sono mantenute, mentre il mesh per il rendering scompare. Nel browser, questa visualizzazione delle collisioni non apparirà di default.

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, basta trascinare e rilasciare 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, a sinistra, indietro e a destra, continuando a tenere premuto il tasto destro del mouse. Per aumentare la velocità, scorri verso l’alto mentre continui a tenere premuto il tasto destro del mouse.

Puoi anche tenere premuto il pulsante centrale del mouse (su MacOS, tieni premuto Alt) per orbitare intorno 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 nella scena 3D.

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

Tocca due volte 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” collegato. Puoi rendere la luce più brillante riducendo la proprietà “intensity” del componente light:

Riepilogo 

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

Puoi continuare aggiungendo comportamento personalizzato con i tuoi componenti JavaScript.

Oppure potresti voler aggiungere il supporto per i controller VR.