Introduction to editing

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

What is an Editor?

Inviting an Editor

Adding content (3D items, images, videos, 360)

3D items

Images

Video

360

Web pages and other resources

Screen share

Bots

Hotspots

Notes

Modifying items

Entering edit mode

Moving, rotating, and scaling objects

Changing the image on a mediaboard

Showing shadows

Showing/hiding objects

The Layers menu

What does each field do?

3D environment settings

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 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 “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:

  1. Open the edit menu by clicking or tapping on the “edit” (pencil + plus)  button in the upper right section of the interface
  2. Select “Add mediaboard”
  3. Click or tap on the blue “Share screen” link towards the top of the popup
  4. 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:

  1. Open the edit menu by clicking or tapping on the “edit”  button in the upper right section of the interface
  2. Select “Add bot”.  A list of your bots will appear.
  3. 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,

  1. Open the edit menu by clicking or tapping on the “edit”  button in the upper right section of the interface
  2. 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:

  1. Open the edit menu by clicking or tapping on the “edit”  button in the upper right section of the interface
  2. Select “Add note”.
  3. From here, hover (or tap) over the note, and click or tap on the cog icon

  1. 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)
  2. 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.

  1. Enter edit mode
  2. Hover over the mediaboard to change (or tap on it on mobile), click or tap on the cog icon  in the panel that appears
  3. Scroll until you see the “diffuseMap” field. Paste your URL in that field
  4. 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:

  1. Enter edit mode
  2. Hover over the mediaboard to change (or tap on it on mobile), click or tap on the cog icon  in the panel that appears
  3. Scroll until you see the “castShadow” field. If it’s not true, write true in it
  4. 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.

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)

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.).

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

rotation: change the x/y/z rotation

scale: change the x/y/z scale

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://learnbrite.com/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://learnbrite.com/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” .

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!

Tell us how we can improve this article?