Skip to main content
Skip table of contents

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/ZhhsDdJWMlQ

Instructions

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!

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.