Creator UI overview
OKO Web Client 2.24.1 - CSP 4.19.0
This article will guide you through the user interface of OKO Web.
https://youtu.be/ZhhsDdJWMlQInstructions
Along the top of the viewport are three toolbars. These toolbars will change depending on whether you are in “Viewer” mode or “Creator” mode. If you are in Viewer mode then the central toolbar will be replaced with a single button which allows you to “Exit Viewer Mode” and return to Creator mode.
When in Creator mode, you will see the following three toolbars at the top:
Content Browser - manage the assets being used in your space, view the entity and component hierarchy and collaborate with fellow creators through comments added to the space.
Control Panel - access the common controls for interacting with your space.
Inspector & Comms - view object and component properties and chat with others in the space, either via text chat or video calls.
Content Browser
The Content Browser features three submenus, accessible by clicking on any of the following icons:
| Asset Library |
| Hierarchy |
| Comments |
Clicking one of these icons will expand the panel to occupy the left portion of the screen.
In the Asset Library panel you will find all of the assets that have been uploaded while in this space. When you first join a newly created space this library panel will be empty, but once uploaded, new assets will appear.
In addition to being able to upload your own custom assets, OKO also offers a selection of essential assets and primitive objects to get you started. If you select the “In Space” dropdown you will see several options.
Under “Essentials” you will find common objects such as different types of light and audio.
The “Portals” sub-option allows you to add portal objects to your environment. These portals enable a user to travel between spaces you have authored, connecting multiple spaces together in an experiential flow.
Sketchfab integration
Additionally, OKO offers Sketchfab integration. You will need to connect OKO to your Sketchfab account, but once configured you can access your saved asset Collections (more on using Sketchfab Collections here).
To connect your account, click the “Connect Sketchfab” button and the following window will pop up.
Select “Accept” and the assets will appear in your library. You can even use the Sketchfab database and search for assets to upload in OKO.
Lastly, in the “Asset Packs” dropdown you will find some basic primitives ready for you to start populating your environment.
For more information on how to upload your own assets please check out this article:Importing assets
Control Panel
The Control Panel provides access to common controls for interacting with your space.
This toolbar provides access to the following:
| Turn On Sound Toggle the sound of audio elements in the space on/off. |
| Enter Site Map See a bird’s eye view of your site. |
| Show Map as Terrain If your space is geolocated, select this option to see it positioned in Mapview mode. |
| Enter Viewer Mode Enter “Viewer” mode and view your space as a visitor would. |
| Snap To Surface Enable to have assets with collision aligned with the ground plane as they are dragged into the viewport. |
| Change Gizmo Mode Select this option to change between different transform modes via the drop down. You can also use the shortcut keys to switch transform mode, which are displayed to the right of each mode. |
| Fly Mode Indicates whether the user has fly-mode active (activate fly mode by holding the shift key). |
| Navigation Speed Adjust your space navigation speed using RMB + the middle scroll wheel. |
| Additional Options From here you are able to edit the render style, adjust the visualization mode, and enable collision and icon indicators. |
Inspector & comms
At the top right of the screen, you will find the Inspector & Comms toolbar, from which you can access the Properties Panel, People List, Chat Panel and Call Panel.
This toolbar provides access to the following:
| Properties The Properties Panel allows you to edit the properties of the selected Entity or Component. The panel is divided into three parts; entity thumbnail, entity hierarchy, and properties. |
Overlaid at the top right of the thumbnail is a target icon, when clicked it will frame the selected Entity in the viewport. This is very useful when trying to find an Entity in a large environment.
The Entity Hierarchy makes it easy to view an entity and its components. When one of these is selected its properties will be displayed at the bottom.
The properties displayed will depend on what has been selected. The parent entity only has transform properties exposed and these can be edited here. Components will have different properties depending on their type.
In addition to editing entity and component properties, you can also add new components, as well as deleting, duplicating, and targeting existing ones. To add new components click the “+” icon to the right of the entity name. This will open a drop-down with all of the available components listed.
To target, duplicate, or delete existing components select the hamburger icon to the right of the component name and select the appropriate option from the drop-down.
That’s it for the creator UI overview!