Quick Start

Welcome to Wonderland Engine. Please install the Wonderland Editor before continuing with this tutorial.

Create a Project

Enter a project name of your choice and create the project through the “Project Wizard” that launches automatically when you start the editor for the first time.

You’re presented with an empty project. Pretty boring! We should add an asset here.

On the bottom left you see the “Asset Browser”. It shows the contents of the project’s directory. All assets for the project should be placed into this directory.

Run in the Browser

To package the project and view it in the browser, click on the green arrow at the top of the window:

Now, whenever we “Package” the project (by clicking the Hammer icon), the browser will automatically reload with our changes.

Remove Objects

With the default scene, we get some lights, objects and most importantly: the player setup.

We do not need the objects. Make sure to delete them by selecting them with left-click and then either delete them by right-clicking in the “Scene Outline”, or by pressing the “Del” key.

Delete only “Cube”, “FloorPlane”, “Sphere” and “Cone”.

Make sure to keep “Player” and “Light”/“Light.000”.

Add an Asset

Create a new folder assets by right-clicking on the root directory and selecting “New folder”.

Download low_poly_winter_scene.zip and extract it or drag and drop the files into that new folder in the Asset Browser. If you use WinRAR you can also drag and drop the files directly from WinRAR.

This beautiful scene was created by “EdwinRC” and can be found on Sketchfab.

To import the scene, simply drag and drop scene.gltf into the “Scene View”. Alternatively you can drag and drop it directly onto an existing object in the “Scene Outline”.

Look Around

To look around in the “Scene View”, hold down the right mouse button while moving the mouse. Use W-A-S-D keys to move forward, left, back and right while still holding down the right mouse button. To increase the speed, scroll up, while still holding down the right mouse button.

Position the Lights

As the lights were positioned for the default scene, they now feel out of place. To move them somewhere them useful, select one in the “Scene Outline” and use the “translation gizmo” handles to drag the light around the 3D scene.

If you don’t have the arrows for translation, you can switch gizmo type using the following keys:

• G (“Grab”): position gizmo
• R (“Rotate”): rotation gizmo
• S (“Scale”): scaling gizmo

Double tap G to toggle translation in local vs world space.

You can also use the toolbar at the top of the Scene View:

Component Properties

The “Light” object makes light, because it has a “light” component attached to it. You can make the light brighter by reducing the “attenuation” property of the light component:

Summary

While this scene only has a few objects, Wonderland Engine is great at rendering many. See the Mesh Particles Example.

You can continue by adding custom behaviour with your own JavaScript components.

Or you may want to add VR controller support.