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.
Let's take a look at how the scene editor is organized.
- 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.
- 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.
- 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.
- Element list: This panel will show all the elements and collections (folders) included in the scene. You can add or delete elements here.
- 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.
- Scene controls: Set of utility controls for element transform, camera view, undo & redo.
- 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.
- 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.
- Properties panel: This panel will show properties of your selected element.
- Events panel: You can add interactions to selected element from this panel.
- Datasheets panel: You can add extra information (metadata) to any element from this panel. Review our Templates & Datasheets documentation for more info.
In order to create a new element, you can just drag any asset from the asset library to the scene viewport.
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 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.
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:
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:
|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.
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.
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.