Sumo3D Documentation

Getting Started

Sumo3D is an editor where you can compose scenes, use textures from Sumopaint into the 3D objects, and you can export it to be used on Sumocode as a part of an interactive piece or a game.

Beyond that you can export any object or scene to use it later in another projects.


  1. The Navbar. It provides an easy access to import/export options and to add any object on the scene.
  2. Play/Stop. Here you can play or stop your 3D scene. If you have any script associated to your objects, when you press play, it will run the script.
  3. Project settings. Here you can setup the project settings. Read more
  4. Outliner. Where you have listed all the elements that are included on the scene (3D objects, lights and cameras).
  5. Properties panel. If you have an element of the scene selected, here you have all the info needed to modify it. Some of the fields are editable, others are only readable.
  6. Toolbar 3D. You can translate, rotate or scale any element, on local or global mode.
  7. Scene editor. Here you can directly edit your scene and select any element to edit it.
  8. Add. A visual way to add elements into the scene.


You can import any glTF 2.0 file you have in your device, or any object/scene exported (JSON format). Binary glTF (.glb) is recommended because you have included the materials too.

Export Object

Export any object selected in JSON format.

Export Scene

Export the whole scene in JSON format.

Export glTF

Export the whole scene in glTF binay format (with all the materials included).


You can undo or redo any action pressing these buttons (see video below) or through the toolbar / Edit / Undo or Redo.

Project settings

You can show/hide it pressing 'info' icon next to undo/redo buttons. Here you can set the name of your project, if you want to autosave automatically, to set up the renderer basic properties or if you want to have VR support. In addition to this, you can set the background color and the fog of your scene. You have an info part with all the objects, vertices and triangles on the scene, this directly affects the performance of your scene.

How to use the scene graph

Inside it, you can drag the elements and organize it with hierarchy.

Using multiple cameras

If you have multiple cameras in your scene, you can change the camera that will be active on the scene graph.

Adding Objects

Add a Group

Groups are useful for multiple 3D objects to share their position, rotation and scale properties.

Add a 3D Object

You can add up to 14 different 3D shapes. If you need to add another different shapes, you can import it from your device if you have a 3D model saved.

Add a Light
Ambient light

This is a light that will project the same amount of light in every direction. You can change the intensity (1 by default) and color.

Directional light

This light emits light from a position projecting shadows (if you have Cast checked) and different intensity depending on its position.

Hemisphere light

This light is similar to the ambient light (same light in all directions) but you can set up top and bottom color.

Point light

This is similar to a bulb, you have the same properties as the directional light and you can play with its distance and decay.

Spot light

It is a cone of light, you have similar properties than point light and a penumbra parameter to smooth the light in the corners of the cone.

Add a Camera
Orthographic camera

With this camera all objects appear at the same scale.

Perspective camera

The objects which are far away are smaller than those nearby.

Object properties

ID related properties

Every element added to the scene it has a unique UUID, you can renew it, but it is not a must. Name field is important to manage your elements from the scripts.

Position / Rotation / Scale related properties

You can edit these parameters to exact values or dragging the pointer.

Visibility related properties

Beyond visible, frustum cull removing objects that lie completely outside the viewing frustum from the rendering process. And Shadow / Cast / Receive are a MUST if you want to use shadows on your scene.

Custom properties

The most common properties to edit here are the FOV (Field of view) (the common values are from 35 to 90) and the near and far, if you want to adjust the renderable area.


Geometry basics

Each 3D object is a Mesh and this mesh has two parts, a geometry and a material. This geometry determines the shape of the object.

ID related properties

Similar to the object (Mesh) element, each geometry has its own UUID and name.

Custom properties

Each geometry it has its own properties. For example a Box has width, height and depth and how many segments are made up.


Materials basics

Every 3D object has a material (by default is a MeshStandardMaterial). It is important to know that multiple objects can share the same material (you can copy and paste between them).

Types of materials
Common types used

Although there are more than 10 types of materials, most of the time we will use one of these two.


It is the cheapest (in performance) because it doesn't calculate any light. It is like an unlit material, and it is commonly used with an image as a map texture.


It is the most realistic one but expensive (in performance). You can play with multiple maps and with roughness and metalness values. It is the closest thing to a PBR material.


Add a new script

On each element of the scene you can add multiple scripts. Programming with JS and following this manual you can add interactivity to your project.

Use predefined scripts

You can add three examples of basic code to your elements. Rotate, translate or/and scale it.