3D embed publishing settings

Feature availability

publish_settings_header_sep23.png

The default publishing settings for our 3D embeds work well in most educational contexts, making it easy to export your 3D model and embed it into virtually any website, application, or course.

But these settings can just as easily be customized to better complement your learning objectives, target device size(s), or page layout. 

Our customizable publishing settings are grouped into the following categories. See below to learn more about the available settings available in each.

 

Viewer Size

Available settings:

 

Responsive vs. Fixed

Default: Responsive with Standard Aspect Ratio (4:3)

This setting controls whether the layout for your 3D embed is responsive or fixed when embedded into another webpage.

  • Responsive (default).  The width of the Viewer automatically adjusts based on the size of the screen or container; specifically, it fills the entire width of the container in which it is embedded. This ensures your end users are able to view and interact with the 3D model in its entirety and access all of the available exploration tools regardless of the device they are using.
    viewer_size_responsive_nov22.png

When your Viewer Size is responsive, a standard (4:3) aspect ratio is selected by default, but you can adjust the aspect ratio to your liking. Learn more about aspect ratios and the additional options available to you in Working with responsive 3D embeds.

  • Fixed.  The width and height of the Human Viewer powering your 3D model remain the same at all times, regardless of the size of the screen or the container in which it is embedded. Depending on how and where your embedded models will be accessed, this may result in important tools or parts of the 3D model going off-screen on mobile devices. We recommend using this option with caution.
    viewer_size_fixed_nov22.png

When your Viewer Size is fixed, you will need to select a fixed width and height (in pixels) for your Viewer. By default, the width is set to 700px in width and 550px in height, and the minimum sizes are 300px and 400px, respectively.

 

Loading Experience

Available settings:

 

Load 3D model automatically

Default: Enabled

Enabled by default, this setting automatically loads the 3D model as soon as the page in which the model is embedded or launched loads. 

If this setting is disabled (i.e., the box is unchecked), a 2D image will appear in place of the 3D model when the page loads, and the end user will need to click or tap a button in order to load the 3D model. This option—loading "on demand"—improves overall page performance and is recommended if you plan to embed multiple models into a single page, or if the surrounding page contains a large quantity of other media that are competing for browser memory. Compare this option to the default setting below.

Enabled:

Disabled:

 

Rotate 3D model on load

Default: Disabled

Launch tutorial on load

Default: Disabled

When enabled, this setting launches a short 3D interaction tutorial the first time the end user loads the 3D model. The tutorial teaches new users how to interact with the model in 3D, including how to rotate, zoom, pan, and explore the anatomy. 

viewer-tutorial_jan23.png

The tutorial guides the user through the following:

  • When the tutorial first launches, the user is given the option to choose between a) mouse, trackpad, or keyboard and b) touchscreen in order to customize the tutorial content to their current device.
    viewer-tutorial_intro_jan23.png
  • At each step, the Viewer detects when the action has been completed successfully, alerts the user accordingly with a green check mark, and (on desktop only) offers a "tip" on how to perform that action using keyboard shortcuts.
    viewer-tutorial_tip_jan23.png

Whether or not you enable this setting when you publish, this tutorial is available to users at all times in More Options under Help (unless you have disabled Help in your Toolbar settings).

3D navigation tutorial_help_sep23.png

Note: When enabled, the tutorial will only appear once per device. Once the end user sees the tutorial on one device, they will not see it again unless they clear their cookies and site data or switch to another device. To delete your cookies and site settings in Chrome, visit chrome://settings/siteData, search for "biodigital.com," and clear all associated data. If you are using another browser, follow these instructions.

 

3D interaction prompt

Default: Do not show hint

When enabled, this setting prompts end users to interact with your 3D model by displaying one of three available animated graphics over the model when it first loads. On click, the graphic disappears.

  • Show button.  A translucent black button with the message "Interact in 3D" turns blue when the end user hovers over the Viewer.
    3D interaction prompt_button.gif
  • Show animated hand.  An animated graphic of a hand with the message "Interact in 3D" pulses to indicate that the end user should tap the screen. Recommended for mobile-only or mobile-first integrations.
    3D interaction prompt_hand.gif
  • Show play button. A black-and-white play button with the message "3D" turns white and blue when the end user hovers over the Viewer. This option additionally displays the model's loading progress in place of the default loading progress indicator.
    3D interaction prompt_play button.gif
  • Show summary. The title of the model, tour, or quiz is displayed in the upper-left corner, and underneath the title is a button whose call to action depends on the type of content currently in view:
    • In single-chapter models, the button says "Interact in 3D."
    • In tours with multiple chapters, the button says Begin Interactive Tour," and the number of chapters in the tour is additionally listed beneath the tour title.
    • In quizzes that are either a) saved as Quiz only in Studio or b) saved as View & Quiz in Studio and published in Assessment mode, the button says "Take Quiz."

In all cases, the button turns blue when the end user hovers over the Viewer.


3D interaction prompt_summary.gif

 

Anatomy Labels

Available settings:

 

Show label when anatomy is selected

Default: Enabled

Enabled by default, this setting triggers a label to appear when the user clicks on or taps an anatomical structure in your 3D model. This "anatomy label" identifies the structure by name—be it an anatomical structure, a component of a structure, a microscopic unit such as a cell, or an inanimate object such as a device.

When this setting is disabled, clicking on or tapping a structure only highlights it. No label appears.

Enabled:

anatomy labels ON_aug23.png

Enabled (pictured alongside labels applied in Studio):

anatomy labels ON with Studio labels_aug23.png

Disabled:

anatomy labels OFF_aug23.png

 

Show "info icon" for description

Default: Enabled

Note: Requires "Show label when anatomy is selected" to be enabled.

When enabled, this setting displays an    info icon in the anatomical structure's anatomy label, which appears when the structure is selected. When this icon is clicked, a detailed description of the structure appears in either the label or a pop-up window depending on the current size of the 3D embed.

anatomy info_aug23.png

When this setting is disabled, no info icon appears in the anatomy label.

 

Show "audio icon" for pronunciations

Default: Enabled

Note: Requires "Show label when anatomy is selected" to be enabled.

When enabled, this setting displays an audio icon in the anatomical structure's anatomy label, which appears when the structure is selected. When this icon is clicked, the name of the structure is read aloud.

audio icon ON_aug23.png

When this setting is disabled, no audio icon appears in the anatomy label.

 

Information Panel

Available settings:

 

Show Information Panel

Default: Enabled

Enabled by default, this setting enables the information panel, which contains all the information associated with each chapter of your 3D model or tour, including:

 

Depending on the size and aspect ratio of the Viewer on a given device, the information panel may take one of two forms: column or button.

Column

Note: The column configuration is used when the Viewer's width is greater than or equal to (≥) 960 pixels.

info panel column_sep23.gif

In the column configuration, the information panel and appears in a column on the left side of the Viewer. It is open by default but can be closed at any time using the "Close Info Panel" button.

If a given chapter contains any of the information or media listed above and is part of a tour, the information panel will be divided into two tabs: "Chapters" and "Info." 

  • In the Chapters tab, a chapter list, which serves as the tour's table of contents, allows you to follow along with your progress through the tour.
  • In the Info tab, you will find the chapter description and/or any complementary media available for the current chapter. 

At the top of both tabs, you will find name of the chapter as well as "Previous" and "Next" arrows that enable you to navigate from chapter to chapter.

If a given chapter contains a chapter description and/or any complementary media but is not part of a tour, only an unnamed version of the "Info" tab of the information panel will appear. The chapter title is provided at the top of the information panel, but no chapter navigation arrows are present.

info panel_no tour_sep23.png

If a given chapter does not contain a chapter description or any complementary media, no information panel will appear, even if the chapter is part of a tour. However, the chapter list can still be accessed from a consolidated, floating chapter navigation menu. 

no info panel_chapter list_sep23.png

 

Button

Note: The column configuration is used when the Viewer's width is less than (<) 960 pixels.

info panel button_sep23.gif

In the button configuration, the information panel is closed by default but can be opened at any time by clicking or tapping the    info icon at the top of the Viewer. When the opened, the information panel will appear at the bottom of the Viewer and will contain the chapter description and/or any complementary media available for the current chapter. 

In this configuration, the chapter list, which serves as the tour's table of contents, can be accessed from a consolidated, floating chapter navigation menu in the upper-left corner of the Viewer. Simply click the "down" arrow next to the chapter title to open the chapter list in a drop-down menu.

Chapter List_may23.png

 

Show label list in Information Panel

Default: Enabled

Enabled by default, this setting displays a list of labels beneath the chapter title and description in the information panel.

The label list enables users to quickly navigate to key learning points on the 3D model by providing a complete list of all of the labels in a given chapter. When clicked, each label in the list highlights the matching label in the model, or triggers the actions that were assigned to that label in Studio.

label list_sep23.png

Note: The label list only shows labels present in the current chapter, and it only includes labels that appear on the model at all times, such as the labels you can add and edit in Studio. The labels that appear when a structure is selected—"anatomy labels"—are listed in the Anatomy Tree, which is enabled in your toolbar settings.

 

Media Controls

Available settings:

 

Show audio controls when available

Default: Enabled

Enabled by default, this setting displays two audio buttons in the "Info" tab of the information panel when audio is available in a given chapter of your 3D model: Play from Beginning and    Unmute or    Mute

Audio is muted:

audio muted_sep23.png

Audio is unmuted:

audio unmuted_sep23.png

Due to browser security restrictions, end users must select the    Unmute icon in order to hear the audio play. However, if you would like to bypass this step, simply enable one of our 3D interaction prompts. As soon as the user clicks or taps the interaction button, the audio will start playing, unmuted.

Warning: If this setting is disabled, the user will have no way of playing or pausing audio in your model, even if audio is technically available in the model.

 

Animation controls

Default: Show all (play/pause button & scrubber)

This setting controls the type of media controls that will appear in the lower-right corner of the Viewer when a given chapter of your 3D model contains animated elements (i.e., elements in motion)—play/pause button and scrubber, play/pause button only, or none.

  • Show all (play/pause button & scrubber) (default).  This is the default setting and is recommended for animations that illustrate a process so the end user can use the scrubber and speed controls to explore the content at their own pace.

    Minimized (default):
    media controls_all_collapsed_sep23.png
    Expanded:
    media controls_all_expanded_sep23.png
  • Only show play/pause button.  If deeper exploration is not necessary for a particular animation, this option will reduce the clutter in your Viewer.
    media controls_play-pause_sep23.png
  • Do not show.  This option should only be selected if you do not want the user to be able to control the animation. Not recommended in most situations.

 

Toolbars

Available settings:

 

3D navigation controls

Default: Enabled

Enabled by default, this setting displays the 3D navigation controls toolbar in the lower-right portion of the Viewer. This toolbar contains four buttons that enable the end user to adjust the position of the model in 3D space:

  • Recenter 3D Model
  • Change to Pan Mode / Rotate Mode
  • Zoom In
  • Zoom Out

 

By default, all but the "Recenter 3D Model" buttons are minimized. To expand the toolbar and access the rest of the controls, click or tap the arrow at the top.

Minimized (default): 

3D controls_collapsed_sep23.png

Expanded:

3D controls_expanded_sep23.png

 

Fullscreen

Default: Enabled

Enabled by default, this setting displays an "Enter Fullscreen" button in the lower-right corner of the Viewer. Clicking this option expands the Viewer so that it spans the entire screen, providing a widescreen, immersive experience.
fullscreen_sep23.png

Note: Fullscreen mode is supported on all devices and browsers—with the exception of iPhone browsers. To enable fullscreen mode for embedded models, make sure your published embed code includes allowFullScreen="true" or simply allowfullscreen. When fullscreen mode is not enabled, the Enter Fullscreen button will be replaced by an Open in New Tab option, which will open the model in a new browser tab.

Undo

Default: Enabled

Enabled by default, this setting displays the Undo/Redo/Reset toolbar, which allows the end user to undo and redo actions taken in the 3D model, as well as reset the model to its original view.

Though it is enabled by default, the Undo/Redo/Reset toolbar is hidden until the model has been modified in any way. At this point the toolbar appears at the top of the 3D scene so it is immediately obvious to the user that the action can be undone.

undo-redo-reset_sep23.png

Toolbar

Default: Enabled

Enabled by default, this setting displays a toolbar in the upper-left corner of the Viewer that can contain a variety of deeper exploration tools. All of these tools are enabled by default but can be individually disabled as desired.
toolbars_toolbar setting_sep23.png

The options available within this toolbar include the following:

  • Selection Tools.  The Selection Tools button enables the end user to choose between three selection modes:
    • Select (default).  Clicking on a structure highlights it in yellow and displays its name, enabling the end user to identify it.
    • Hide.  Clicking on a structure hides it from view, enabling the user to see underlying structures. 
    • Fade.  Clicking on a structure makes it transparent but does not hide it, enabling the user to see underlying structures as well as their relationship to the faded structure.

    selection tools_sep23.png
  • Anatomy Explorer.  The Anatomy Explorer enables end users to explore a comprehensive list of anatomical structures that make up the current 3D model.
    • In the "Anatomy Tree" tab, users can browse or search through this list by anatomical system or thematic grouping, and they can drill down to view sub-groupings and individual structures. From there, they can perform advanced actions on these structures, such as viewing them in isolation or applying a fade effect to better understand their spatial relationship to other structures. Learn more in What is the Anatomy Tree?
    • In the "Search" tab, users can locate specific structures in the model by name or keyword. Like in the Anatomy Tree tab, users can also perform advanced actions on individual structures, such as isolating or applying a fade effect to them to better understand their spatial relationship to other structures.

    anatomy explorer_sep23.gif
  • Draw.  The Draw tool allows the user to draw on and add text to a 2D snapshot of the 3D model to pinpoint key anatomical structures or concepts. Learn more in Using the Draw tool.
    draw tool_jul23.png
  • Help.  The Help menu is found in "More Options" at the bottom of the toolbar, provides access to the following educational resources to help end users make the most of their experience in the Viewer: Getting Started Video, 3D Navigation Tutorial, and Keyboard Shortcuts.
    help menu_sep23.png