World-building fundamentals
OKO Web Client 2.24.1 - CSP 4.19.0
This article will guide you through the basics of world-building in OKO Web.
https://youtu.be/XhWDxvKiDzwInstructions
At the top left corner of your space, you will find the Content Browser. From here you can manage the Assets in your library and the Entities in your space. While Entities do a lot behind the scenes, they will have no visual appearance in your space, just transform properties that you can use to define a position, rotation, and scale. We add components to them to compose visually engaging experiences and complex behavior.
If you take a closer look at the menu you will see different submenus, including “Assets” and “Hierarchy”.
Assets
Select “Assets”, and import an asset to the “In Space” library, or select “Primitives” from the dropdown, and choose one of those. Either way, drag and place the asset into your space. Once the asset is placed, a new Entity is created automatically, which contains the asset as a Component.
For more information on how to import an asset, please check out Importing assets
Hierarchy
An Entity can be thought of as a container, or a parent, with one or more Components (children) contained within it. Open the Hierarchy to see the Entity, and select the plus icon next to the Entity to see the Component underneath. When selected, the Entity will be highlighted in green within the space.
If you have added multiple Components to a single Entity, selecting that Entity allows you to move, rotate, and scale the Entity – and all Components within it – as a single unit.
However, you still can move, scale, and rotate each Component individually by selecting it under the Entity. When a single Component is selected, it will be highlighted in yellow within the space.
To move an existing Component from one Entity to another, open the current Entity that contains it, and drag the Component to the desired Entity within the Hierarchy.
We’ll discuss adding a new Component shortly, but first, let’s cover a few more functions within the Hierarchy.
If you look closely in the screenshot below, you will see an eye icon to the left of each Component within an Entity. This icon can be used to hide a particular Component from view.
Additionally, when selecting the double dots “:” icon to the right of an Entity or Component, you will open a new menu. This allows you to “Go To”, “Duplicate” or “Delete” individual Components, or the entire Entity.
If you select “Go To”, your editor camera will get closer to the Component or Entity.
Selecting "Duplicate" will generate a copy of a particular Component or Entity.
Choosing “Delete” will remove the Component or Entity from your space. Deleting from the Hierarchy is the safest approach, as this will only delete the particular instance of any asset(s) contained in that Entity. This is a much less destructive action than deleting from your Asset Library, as that action will delete ALL instances of a particular asset within your space.
Properties Panel
Near the top right corner, you will find the Properties Panel. Here you will be able to edit the Entity and Components just like in the Hierarchy Menu, but also fine-tune their position, rotation, and scale using Transforms.
Transforms are numerical values assigned to the X, Y, and Z axes of each (position, rotation, scale), and can be adjusted here on both the component level, and the entity level (affecting all components within the entity). These values can be increased/decreased by selecting the X, Y, or Z icons and sliding right/left as shown in the screenshot below, or numerical values can be entered directly into each of the text fields.
The Properties Panel also allows you to add new components to the entity. Just select the plus icon next to the entity to display the component list as shown in the image below.
When adding a new component, such as a point light, it will become part of that entity.
You can adjust the light properties to suit your preferences. You can also switch the Component to a different one from the Properties Panel. Properties vary for each component type, so be sure to explore all the options once you make a selection!
For some types of components, such as Static and Animated Models, or Image, Audio and Video, you will be presented with a dropdown in the Properties Panel. This will list all assets currently available in your Asset Library that match the type of component you selected.
For example, Static and Animated Model Components will list all GLB files in your library. Image will list all JPG and PNG files, Audio all MP3 files, Video all MP4 files, etc. Selecting the appropriate file from the dropdown will then assign an instance of that asset to the Component. Once that is done, you can adjust the various properties for that Component.
That’s it for world-building fundamentals!