How to use this guide Our suggestion is to use this document as a reference while you are learning to interact with the platform: skim the guide to get an overview of the basic interactions and UI elements, and read more attentively the sections you are interested in. It will all become second nature as you grow more comfortable with the platform |
Adding content (3D items, images, videos, 360)
Moving, rotating, and scaling objects
Changing the image on a mediaboard
What is an Editor?
An Editor is somebody who has the power to edit a space. The owner of the space is an Editor by default, and they can in turn assign this role to others (there can be multiple Editors for any space).
If you are an editor, you will see a small “👑” crown symbol on the left of your name when accessing the space.
To learn more, see our guide on User Roles.
Inviting an Editor
For instructions on how to invite a user from Dashboard, see “Access > How do I invite other users to a space/world?” in the Known Issues & FAQ guide.
Adding content (3D items, images, videos, 360)
Content in the 3D environment is added as some type of 3D item, whether it’s an actual 3D model, or as a “flat screen” that is showing an image, video, or perhaps contains some text, or is used for screen-sharing.
Adding objects to the 3D scene can be done through the “Edit menu”, opened by clicking or tapping on the “edit” (pencil + plus) button in the upper right of the interface.
We are interested in the first option in the dropdown, “Add content”
Clicking or tapping on it will open the content browser, which allows quick adding of 3D models, images, videos, and 360 panoramas.
3D items
Don’t know where the content browser is? See the start of Adding content (3D items, images, videos, 360) |
The 3D Items tab is the default when opening the content browser, and it allows you to browse existing 3D models from the LearnBrite catalogue, as well as services such as Sketchfab and Google Poly.
Tip: when possible, it’s better to use objects from the LearnBrite catalogue, as they are optimized for performance. 3D assets imported from Sketchfab and similar services often require a lot of resources, which might result in performance hiccups for users on less powerful devices. Google Poly objects are, generally speaking, also more performant than Sketchfab ones. |
If you are searching for a 3D item
You can browse pages by using the arrows at the bottom, search for keywords by writing them at the top, and filter by service (e.g. LearnBrite, Google Poly, Sketchfab) from the Filter dropdown on the top left.
When you find an object you like, click or tap on it and it will be added to the scene.
Note that models can take a few seconds to load in the scene, depending on their complexity.
If you already have the URL of the item
If you already have a URL for the item you want to add (e.g. from our storage service) you can write or paste it at the top, then click on “Import” (the button will only appear after you write something in the input field).
Images
Don’t know where the content browser is? See the start of Adding content (3D items, images, videos, 360) |
To add images, open the content browser, then click on the “Image” tab below the text field at the top.
If you are searching for an image, you can browse images from an online service, and add them to the scene by clicking or tapping on them. You can search for different images by writing keywords in the text field at the top.
If you already have the URL of the image, you can paste it at the top, click “Import”, and a popup will ask you whether you want to import it as a flat image (“Image as Mediaboard”) or as a 360 panoramic background. Choose the correct option (if you don’t know, select the first one, “Image as Mediaboard”), and the image will be added to the 3D scene.
Video
Don’t know where the content browser is? See the start of Adding content (3D items, images, videos, 360) |
Video works in the same way as images. To add video, open the content browser, and click or tap on the “Video” tab.
If you are searching for a video, you can browse the results in this window by using the arrows at the bottom, and add one to the scene by clicking or tapping on it. You can search for different videos by using keywords in the text field at the top.
If you already have the URL of the video, you can paste it at the top, click “Import”, and a popup will ask you whether you want to import it as a “flat” video (“Video as Mediaboard”) or as a 360 panoramic background. Choose the correct option (if you don’t know, select the first one, “Video as Mediaboard”), and it will be added to the 3D scene.
To play and pause the video you can click or tap on it directly in the 3D space.
360
Don’t know where the content browser is? See the start of Adding content (3D items, images, videos, 360) |
Through the content browser it’s easy to add 360˚ panoramic background to a 3D environment.
First, open the content browser window and click or tap on the 360˚ tab.
If you are searching for a background, you can browse the results in this window by using the arrows at the bottom, and add one to the scene by clicking or tapping on it. The results are both image and videos, and you can search for different ones by using keywords in the text field at the top.
When clicking or tapping on a background, a small popup will appear with settings for the background. If you are not familiar with them, you can go with the defaults and simply click or tap on the green confirmation button.
If you already have the URL of your background, you can paste it at the top, click “Import”, and a popup will ask you whether you want to import it as a “flat” image/video (depending on the format of the resource, either “Image as Mediaboard” or “Video as Mediaboard”) or as a 360˚ panoramic background. Choose the second option, and a final popup will appear allowing you to adjust any 360˚-specific settings. If you are not familiar with them, you can go with the defaults and simply click or tap on the green confirmation button to add the background to the scene.
If you are not happy with the settings, you can change them by opening the edit menu, and then choosing “Panorama 360˚”
Web pages and other resources
If it has a URL, it can be added to a 3D space, and you can do so through the “Add mediaboard” option in the edit menu.
You can ignore the various options – just type or paste your link in the text box, and click or tap “Create”.
A mediaboard will be automatically added to the 3D environment, and interacting with it will open the embedded link.
A preview of the page is also generated and set as the “cover” of the mediaboard. This can be modified with an image you have available.
Some pages do not allow being embedded in others, and must instead be opened in their own tab. For these pages, interacting with the mediaboard will show you a link you can click to open the page. For the others, the page will show in the 3D environment. |
Screen share
To add a mediaboard for screen-sharing:
- Open the edit menu by clicking or tapping on the “edit” (pencil + plus) button in the upper right section of the interface
- Select “Add mediaboard”
- Click or tap on the blue “Share screen” link towards the top of the popup
- Click or tap “Create screen share”
Bots
Bots are interactive agents you can add to a space. Fully customizable, they are extremely useful for both self-paced learning and conferencing scenarios (especially as stewards or guides, in this latter case).
To add one:
- Open the edit menu by clicking or tapping on the “edit” button in the upper right section of the interface
- Select “Add bot”. A list of your bots will appear.
- Click or tap on one of them to add it to the scene, or create a new one.
Hotspots
Hotspots let users move to predefined positions by clicking or tapping on them. To add one to the scene,
- Open the edit menu by clicking or tapping on the “edit” button in the upper right section of the interface
- Select “Add hotspot”.
Notes
Notes are the virtual equivalent of sticky notes – they allow you to write something and post it in the space for others to see, and are useful for comments on specific items, labeling, and instructions. To add one, follow these steps:
- Open the edit menu by clicking or tapping on the “edit” button in the upper right section of the interface
- Select “Add note”.
- From here, hover (or tap) over the note, and click or tap on the cog icon
- Edit the options (innerHtml is the text that appears in the note, and you can use style as well if you’re familiar with CSS)
- Click or tap “Save item”, then close the popup
Modifying items
Entering edit mode
To modify the position, scale, etc. of items in the 3D environment you will need to be in “Edit mode”, a special mode of interaction that is characterized by a blue top navigation.
To turn edit mode on or off, click on the “edit” (pencil + plus) button in the upper right, the select “Start editing” in the menu.
To turn it off, you can either click on the “Stop editing” button at the top left, or open the edit menu again, then click “Stop editing”.
Moving, rotating, and scaling objects
After you enter edit mode, you can change the position, rotation and scale of items in two ways.
“Standard” movement is activated by hovering over an item (or tapping it, on mobile), then clicking or tapping on the icon with crossed arrows . Then, you can:
- Rotate the item by clicking or tapping (and dragging) the spheric gizmos around its midsection.
- Scale the item by clicking or tapping (and dragging) on the cubic gizmos at the corners.
- Move the item by clicking or tapping (and dragging) on any spot on the item that isn’t one of those special gizmos
You can then fix the object (i.e. exit this mode) by clicking on the crossed arrows again.
If you need more precise control, the platform also supports the traditional editing gizmos that allow you to move, rotate or scale only on a specific axis. To activate this (often called “advanced transform controls” here and in our other guides), enter edit mode, hover (or tap) over an item, then open its settings by clicking on the cog icon . Scroll down to the bottom, then click on “Show advanced transform controls”. A new menu will appear at the top that will let you choose between move, rotate, and scale. To do so, you can use the three colored axes that will have appeared in the object.
Changing the image on a mediaboard
To change the image on a mediaboard, you will need to have the URL of the new image handy. If it’s not already hosted online, you can use our storage solution.
Make sure the image is hosted on a secure server (i.e. that the URL starts with “https://”). Otherwise the 3D environment will not be allowed to load it. |
- Enter edit mode
- Hover over the mediaboard to change (or tap on it on mobile), click or tap on the cog icon in the panel that appears
- Scroll until you see the “diffuseMap” field. Paste your URL in that field
- Click “Save item” at the bottom
You should see the image on the mediaboard change soon after.
Showing shadows
By default, items will not cast a shadow when imported. This can be changed by simply turning them on:
- Enter edit mode
- Hover over the mediaboard to change (or tap on it on mobile), click or tap on the cog icon in the panel that appears
- Scroll until you see the “castShadow” field. If it’s not true, write true in it
- Click “Save item” at the bottom
You might have noticed a “receiveShadow” field in the list as well. This should only be set to true for surfaces that the shadow should be cast on, e.g. the environment, or perhaps a table or other surfaces if you plan on putting objects on top of them. The field is changed in the same way as castShadow.
Sometimes, shadows might be enabled but still not show. First, make sure that the surface on which the shadows are cast has receiveShadow set to true. If that is the case and you still don’t see shadows after reloading, shadows might be disabled as an optimization: as not all systems have the capability to render real-time shadows, we err on the side of performance and disable this function in favour of a smoother experience. |
Showing/hiding objects
To simply hide an object, uncheck the visible checkbox in its properties.
The Layers menu
It is also possible to hide and show groups of objects through the “Layers” menu ( icon in the top navigation).
To create a layer, simply add a tag to an object in the scene. For example, if I want to have a layer with a number of balloons called “end of presentation”, I can open the configuration of that object and add “end of presentation” to the tag field. Different tags can be added, separated by a comma.
After the object is saved, the layers menu is populated with the new fields.
If the layer has the eye icon, its objects are visible. If the eye has a mark over it, its objects are not visible. Each layer can be clicked to toggle from hide to show and vice-versa.
What does each field do?
The fields in this list are ordered alphabetically.
active
true/false, whether the hotspot can be clicked on by the user. Inactive hotspots are grey in edit mode.
avatar_externalId
externalId of a bot to place on this hotspot, usually filled in automatically when doing Edit menu → Add bot
avatar_mood
see Moods in the Scenario Gestures guide.
avatar_name
name of the bot placed in this hotspot, helpful to override the name given to a bot
avatar_onclick
action (see Scenario Actions linked above) to take when clicking on the bot.
castShadow
true/false. If true, the object can cast dynamic shadows (but can only do so on objects which have receiveShadow:true).
directional
true/false. If true, the hotspot is "directional", and any avatar that teleports to it will face the direction of the arrow. When it's false, avatars will instead face the direction of the camera (and the hotspot will appear as a circle on the grown, as opposed to having a "teardrop" shape)
freeTeleportTarget
true/false. Controls whether the object interacts with free teleporting (see “Dashboard parameters → Enable Free Teleporting”), i.e. whether a user can teleport on top of it.
loadPriority
the loading step at which this object will be loaded, which is done from lowest to highest. If multiple objects have different load priorities, the ones with the lowest number are loaded first; then the ones with a higher number; then the ones with a higher number still; and so on (e.g. all items with priority 1; then all items with priority 2; then with 3; etc.).
As an example, let’s say you have in your space objects with loadPriorities 1, 2 and 4. The load order will be:
- all items with priority 1
- all items with priority 2
- all items with priority 4
minDeviceScoreToLoad
the minimum device score (a performance metric we calculate based on device capabilities, with lower-end devices generally having lower scores) a device needs to have to load the current object. It’s a value that goes from 0 (the default, for which the item will load on all devices) to 1 (the maximum). It’s important that any object necessary for your space has a value of 0 in order to always load.
Typically to hide items on low performing devices such as mobile, set this to 1.
name
change the name displayed
onPlayerLookAt
action (see Scenario Actions) to trigger when the player "enters" looking at the bot placed in this hotspot (i.e. they weren't looking and now they are)
onPlayerLookAway
action (see Scenario Actions) to trigger when the player "exits" looking at the bot placed in this hotspot (i.e. they were looking and now they aren't)
position
change the x/y/z position
posture
see “How to decide whether they are sitting/standing” in the Avatars & Bots guide
receiveShadow
true/false. If true, shadows from objects with castShadow:true appear on the surface of this object.
rotation
change the x/y/z rotation
scale
change the x/y/z scale
sceneryStatic
Locks items in place to avoid accidentally moving them in edit mode and greatly improves performance of a space. The performance optimization means sceneryStatic items do not support On Click (or any other type of interactions)
Pro tip: sceneryStatic is extremely useful when trying to place items inside another item, such as placing a chair in a booth. Setting the booth to sceneryStatic allows for easy placement of items on it and in it.
Note all templates room models have sceneryStatic enabled, which prevents moving the room around in edit mode.
Technically sceneryStatic items are excluded from raycasts (where a user clicks) which means a user can not click on the object, any On Click actions applied to the object will not be triggered.
How to enable sceneryStatic on an item:
Click the setting icon on the item in edit mode.
Enable the sceneryStatic checkbox and click the Save item button
Now in edit mode the bounding box and icons won’t appear on the item.
To edit the item or turn off sceneryStatic
- Click the pencil+ toolbar icon
- Select Show Show items list
- Search for the item
- Click the Edit button
- Uncheck sceneryStatic and click the Save item button
spawn
true/false, whether the player (i.e. a "live" user, not a bot) can be placed in this hotspot when they load the space. Spawn hotspots are orange while in edit mode.
spawnRadius
the radius of the circle – for that hotspot – in which users can spawn. This is used so that two users loading the space at the same time won't "overlap" each other. It's also useful to set this to 0 in case you want a player to spawn in a specific position, without any variance in position (a chair for instance)
spotTag
used as a marker for some actions (see teleportActorToSpotTag, teleportPlayerToSpotTag, etc in https://hyperspace.mv/academy/scenario-actions/ ) or to spawn a bot set in ChatMapper in that place (use the same value in this field and in avatar_spotTag in ChatMapper, see avatar_spotTag under the Actors section in the ChatMapper Template guide)
Track Interactions
if checked, interactions with this item (click or tap) will be recorded in Trophio, and the number of times each user interacted with the object will be visible in the Analytics report (see https://hyperspace.mv/academy/trophio-gamification-user-guide/)
tag
a comma-separated list of tags to give to an object. Currently used to hide/show layers (they "eye" menu in the top bar)
3D environment settings
Each 3D environment comes with a bevy of options to customize it, from activating/deactivating UI elements, to turning entire types of functionality on and off, to changing the branding of a space, and so on. These are normally accessed in the Dashboard, but they can also be accessed from the space by opening the edit menu and selecting “Space settings” .
