Quick Start

Welcome to Wonderland Engine. Make sure you installed the editor before continuing with this tutorial. See Installation Instructions.

If you do not have a license yet, you can start a free trial on the Account page.

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.

Now uncheck “Use default scene” to create a completely bare project.

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.

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. 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”.

There are no lights imported with this scene, everything is pitch-black!

Add a Light

In the “Scene Outline”, right-click the root node (with name “root”) and “Add Object > Light”.

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 Light

The light is created in a default position. To move it somewhere more useful, select it 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.

Add a Camera

For the app running in the browser, the runtime needs to know where to render the scene from. We do this by adding an “Empty” object (“Scene Outline” > Right-Click > Add Object > Empty).

If it isn’t already, you can reparent it to root by drag and drop:

Now select your new object. In the “Property View” on the right, you will find its properties and components. Add a “view” component:

And lastly, add a “mouse-look” component for us to control the camera in the browser:

Finally, rename “Empty” to “Camera” so that we can find it more quickly in the future.

Run in Browser

To see the scene in the browser click “Package”, then “Start Server” and finally “Open Browser”.