Scene Editor

The Scene Editor is the tool you will use to design and configure your experiences. This tool will be automatically launched when opening a project.

Layout

Let's take a look at how the scene editor is organized.

  1. Back to Projects | Asset Library: In the top left menu you have two main options. In the first one (folder icon) you can go back to the projects screen. With the second one, you can open the Onirix Assets library, where you can browse through the different types of assets (3D, image, video, etc.), include them in the scene, preview, and organize them in collections.
  2. Current project and Scene list: Here you can see your current Project (and also update its name), also you can create a new scenes to include into the project, or switch between existent scenes.
  3. Current scene: This item will show current loaded scene. You can select, rename or delete it from there. By selecting the scene you will show the Scene properties in the section 8 of this layout.
  4. Element list: This panel will show all the elements and collections (folders) included in the scene. You can add or delete elements here.
  5. Scene viewport: A 3D viewport which will preview your scene and will help you to design and position your contents. This viewport can be as the one in the image for Surface scenes, or similar to it, with the trigger marker in the center, for image-tracking Scenes.
  6. Scene controls: Set of utility controls for element transform, camera view, undo & redo.
  7. Project shortcuts & settings: You can manage project properties, access to specific features such as maps, 3D viewer, scene preview, sharing options or online editor. Also you have access to help and support resources, all the project internal settings and the activation/deactivation utility.
  8. Perspective control: With this tool you will be able to change the perspective of the editor quickly, with a simple click, visualizing the grid in the different X, Y, Z coordinates.
  9. Properties panel: This panel will show properties of your selected element.
  10. Events panel: You can add interactions to selected element from this panel.
  11. Datasheets panel: You can add extra information (metadata) to any element from this panel. Review our Templates & Datasheets documentation for more info.

Adding elements to the scene

In order to create a new element, you can just drag any asset from the asset library to the scene viewport.

Move, rotate or scale elements

Whenever you want to move, rotate or scale any of your elements, you can use the gizmo (axis control drawn over the element) or the inputs that appear inside element properties.

Camera controls

Camera controls are essential for viewing your scene from different perspectives. You can move the camera by:

  • Using your mouse: right click and drag to move left / right and up / down, left click and drag to rotate, mouse wheel to move forward / backward.
  • Using your keyboard: use keyboard arrows to displace the camera left / right and up / down.
  • Using perspective shorcouts: you can quickly move between different perspectives by selecting predefined camera views.

Whenever you close an scene, your browser will store th last camera position, that will be recovered the next time you enter the scene again.


Keyboard shortcuts

Within the scene editor there are different keyboard shortcuts to perform position, rotation or scaling tasks with much more precision.

For this, it is basically enough to be located in each of the transformation actions that we want to apply, and use the arrow keys on our keyboard to make very subtle changes (order of hundredths).

We also include the possibility of controlling the degree of precision by pressing the Shift key on the keyboard while moving with the arrow keys. In this case the movements will be a little wider, and we will be able to play with the degree of calibration in a simple way.

In this case you can see how we move the 3D model using just the right arrow, and then using Shift+right arrow:

This is also valid for rotation or scaling transformation as you can see in this video bellow (keep in mind that you have to set the focus on the field you want to control before using the keyboards):

Also, if you want to delete an element from the scene, you can use the backspace key to do it, and the Enter key to confirm this action:

delete%20element%20keyboard


Adding interaction through events

In order to create dynamic experiences, Onirix provides a simple mechanism to add some interaction by attaching events to your scene or elements.

Here it is the complete Event list:

Event Attachable to Triggered when
Click Any element type Touching an element
On Scene Load Scene Scene loads
Finish Audio, Video Multimedia element finished its playback
Proximity Enter * Any element type You are closer to an element above certain threshold. See about proximity units.
Proximity Exit * Any element type You are closer to an element below certain threshold. See about proximity units.
Node Arrive Route node You arrive to a route node (for scene-tracking only)

When creating an event, you must also specify an action, what you expect to happen when the event triggers. Here it is the full Action list:

Action Description
Launch URL Launch the URL on the device
Enable visibility Makes an element visible
Disable visibility Makes an element not visible
Enable all Makes all elements visible
Disable all Makes all elements not visible
Toggle visibility Makes visible if not visible and not visible if visible
Play Plays a multimedia element
Pause Pauses a multimedia element
Play/Pause Plays a multimedia element if paused and pauses if playing
Position Changes the position of an element
Rotation Changes the rotation of an element
Scale Change the scale of an element
Reset Reloads the scene
Play animation Plays a 3D element animation
Stop animations Stops all animations on a 3D element
Set variant Set a variant to a 3D element

When selecting an action, you can also specify a delay, in seconds, that will wait that time for your action to be executed.

About proximity units

For these events to work properly, ensure your scenes are up to scale:

  • Image Scenes: If you're using image-based scenes, you should adjust the marker's width and height in the scene properties to match real-world dimensions.
  • Surface Scenes:
    • Android (using WebXR): The scale will be automatically determined.
    • iOS: The scale will be estimated based on the assumption that the chosen surface is located 1 meter below the device. For instance, if you set the trigger at 20cm, but the selected surface is actually 2 meters below the device, the effective trigger distance will become 40cm.

Adding extra information to your experience

Onirix also provides a way to add metadata to your elements, scenes or projects. As this is a broad topic, and probably only meaningful for SDK users, we have separated it into other section: Templates and Datasheets.

Results