The 3D Model Viewer component and the 3D Editor

Name

The name of the 3D Model Viewer component.

The GLB source file for the 3D asset. The asset file should be 3 MB or smaller in size.

See the 3D Assets Guide for additional guidelines, and use the Khronos glTF Validator to ensure that your GLB file is valid.

Gesture cue icon

The image to display over the 3D model to prompt the user to interact with the model. The gesture cue moves slightly to catch the user's attention until the animation limit is reached, and disappears once the user begins interacting with the model. Can be bound to dynamic data.

Gesture cue text

The text to display under the gesture cue icon. Only applies if a gesture cue icon is specified. Can be bound to dynamic data.

Set animation limit

Check this box and set a duration in seconds to limit how long the gesture cue animation lasts. Can be bound to dynamic data.

The GLB source file for the 3D model.

This field is read-only. To change the source file, exit the 3D Editor dialog and edit the component Source property in the Properties panel.

Details

Size - The source file size.

Materials

You can configure one material at a time.

• Selected - All materials used in the 3D model are listed in this dropdown. Select the material you want to view or edit.

Base color

The starting color and texture to use for the current material.

Metallic / Roughness

The Metallic and Roughness properties determine how light reflects off the material.

• Texture - Select a texture to indicate which parts of the material are metallic.
• Metallic - A value between 0 and 1 to indicate how metallic the material is. More metallic materials reflect more of the environment.
• Roughness - A value between 0 and 1 to indicate how matte the material is, affecting the sharpness of reflections. 0 is fully reflective and 1 is fully matte.

Normal map

Select a texture to add bumps and surface details to the material.

Emissive

Select a color and a texture to represent the material's glow.

Occlusion

Select a texture to represent shadows from ambient lighting.

Set additional options for the material:

• Double sided - Select this checkbox to make this material double-sided.
• Alpha blend - Select how the alpha values (transparency) of textures should be treated:
  • Opaque - Alpha values are ignored and the texture is always fully opaque.
  • Blend - Alpha values between 0 and 1 are translucent.
  • Mask - Each part of the texture is either fully opaque or fully transparent, depending on how its alpha value compares to the specified Alpha cutoff value. Alpha values higher than the cutoff are treated as opaque.

Image - Select an image or an environment (an HDR file) to use as the background. Can be bound to dynamic data.

Environmental lighting (HDR)

You can use image-based lighting to provide detailed lighting that's based on a real-world environment.

• Image - Select a spherical image in HDR format to use. Can be bound to dynamic data.
• Exposure - The level of light exposure.
• Shadow intensity - The opacity of shadows.
• Shadow softness - The blurriness of shadows.

Animations

If the GLB source file contains animations, you can set an animation to autoplay. The 3D Editor doesn't support creating animations at this time.

• Default - Select an existing animation to use as the default.
• Autoplay - Select this checkbox to start playing the default animation when the component loads.
• Set animation limit - Select this checkbox and enter the number of seconds you want the animation to play before automatically pausing.

Initial camera view

The initial camera view determines the camera settings when the component loads. Any camera rotation limits and camera zoom limits set below are enforced.

• Yaw - How much the camera is rotated around a vertical axis, in degrees.
• Pitch - How much the camera is rotated around a horizontal axis, in degrees.
• Zoom - How close of a view the camera has of the model.
• Use current as initial - Click this button if you've adjusted the camera view within the 3D Editor dialog preview, and want to use the current camera view as the initial camera view.

Orbit pivot

The orbit pivot is the point in 3D space around which the camera rotates. By default, it's set to the center of the 3D model.

• X - The x-position of the orbit pivot.
• Y - The y-position of the orbit pivot.
• Z - The z-position of the orbit pivot.
• Reset - Restore the default orbit pivot coordinates.

Field of view

The vertical field of view of the camera.

• Angle - An angle between 1° and 179°.

If you want to restrict how far users can rotate the model, select the Yaw or Pitch checkbox and set the minimum and maximum angles.

• Yaw (side to side) - How far the camera can rotate around a vertical axis.
• Pitch (up and down) - How far the camera can rotate around a horizontal axis.

Camera zoom limits

• Type - Select whether you want restrictions on the user's ability to zoom:
  • Unlimited camera distance - No restrictions. This is the default selection.
  • Limited camera distance - Set a minimum and maximum range of distance. The Min zoom level must be set to a lower value than the Max zoom level.
  • Fixed camera distance - The user cannot change the zoom level. The Min zoom level and Max zoom level must be set to the same value.

Hotspots

Hotspots are points on the 3D model that users can interact with. You can display info cards or set up events in response to clicked hotspots.

• Add hot spot - Create a new hotspot. After selecting this button, click the point on the 3D model where you want to set the hotspot. You can customize the hotspot in the subsequent fields.
• Name - The name of the hotspot. Click the Delete icon next to a hotspot's name to delete the hotspot.
• Info card - Whether clicking the hotspot invokes an info card:
  • None - No info card is invoked.
  • Info card - An info card is invoked.
• Title - The title displayed on the info card. Can be bound to dynamic data.
• Description - The text displayed on the info card. Can be bound to dynamic data.

Image

You can customize the appearance of hotspots by specifying images for different states. All hotspots use the same set of images.

• Up - The default image used when the user isn't interacting with the hotspot.
• Down - The image used when the user clicks a hotspot.
• Over - The image used when the user's cursor is hovering over a hotspot.
• Size - The width and height of a hotspot.

Info card styles

Customize the info card's appearance by setting its colors.

• Font color - The color for the info card title and text.
• Background color - The color for the info card background.
• Border color - The color for the info card border.