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 from the 3D environment

Inviting an editor from the Dashboard

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

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. The look of the crown might change slightly based on the platform you are accessing it from.

Inviting an editor from the 3D environment

This is only possible from version 2.13 onward. For earlier versions, Editors must be invited from Dashboard

To do this, you must be an editor (it doesn’t matter whether you are the owner or not, as long as you are an editor).

  1. Click on the  icon
  2. Write the person’s email address and name in the “Invite by email” section
  3. Select “Editor” from the dropdown
  4. Click “Send invite”

Inviting an editor from the Dashboard

To do this, you must be the owner of the space.

  1. Access your list of spaces,
  2. For the desired space, click on the “more” icon  (three vertical dots in the bottom right of a space)
  3. Select “Invites” in the popup
  4. Add the user’s name and email, then in the last field select “Editor” from the dropdown
  5. Click “Send” in the bottom right corner of that section

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” (pencil + plus)  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” (pencil + plus)  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” (pencil + plus)  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.

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?