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