Quick Start
Welcome to Wonderland Engine. Please install the Wonderland Editor before continuing with this tutorial.
Create AccountCreate 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.