The 3D Model Viewer component and the 3D Editor

This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads, or image ads.

The 3D Model Viewer component lets you embed a GLB-format 3D model in your ad that users can rotate, pan, or zoom. You can also configure the model within Google Web Designer's 3D Editor.

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

Browser compatibility

Microsoft Edge does not support the 3D Model Viewer component.

To add the 3D Model Viewer component to your project:

1. Open the Components panel, then the Graphics & Effects folder.
2. Drag the 3D Model Viewer component to the stage.
3. In the 3D Model Viewer section of the Properties panel, enter the GLB file you want to use as the Source. Click the Browse button to select a file from your file system.
4. Double-click the component on the stage to open the 3D Editor dialog and configure the model. Once you're done, click Save.

You can adjust your Google Web Designer preferences (Edit > Preferences... > Components) to automatically create a 3D Model Viewer component when you drag a GLB file to the stage.

Properties

The component properties are visible in the Properties panel. (You must exit the 3D Editor.)

Property	Description
Name	The name of the 3D Model Viewer component.
Source	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.

Advanced properties

Property	Description
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.

3D Editor

To open the 3D Editor dialog:

• Double-click the 3D Model Viewer component on the stage.

You'll see a preview of the 3D model that you can rotate and zoom. You can also interact with any hotspots.

Use the panel on the right to configure the model. Configurations are organized under two main tabs: GLB and Component.

GLB tab

Changes made in the GLB tab are saved to the model source file in your assets folder. This includes any image files used as textures, which will be bundled in the GLB file. You can set your Google Web Designer preferences to automatically delete unused textures.

GLB information
Source	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
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.
Other	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.

Component tab

Changes made in the Component tab are reflected within the 3D Model Viewer component, and not in the underlying GLB source file.

HDR files

HDR (High Dynamic Range) image files can be used for the background and environmental lighting in the 3D Model viewer component. Each HDR file should be under 150KB. We recommend resizing large HDR files to 256x128 in order to fit within this limit.

Presentation
Background	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.
Camera
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°.
Camera rotation limits	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	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.

Events and actions

Events

Events can be used to trigger other actions in your ad. The 3D Model Viewer component sends the following events:

Event	Description
3D scene rendered	Sent after the 3D model scene is rendered for the first time.
Camera changed	Sent when any of the 3D camera properties changes. If the user adjusts the camera, the event.detail object contains the property source: user-interaction.
Hotspot clicked	Sent when a hotspot (set in the 3D Editor) is clicked. The event.detail object contains the name of the hotspot clicked, the index of the hotspot in the scene's list of hotspots, and the X and Y screen coordinates of the hotspot.
Interaction started	Sent when the user starts interacting with the 3D model.
Interaction ended	Sent when the user stops interacting with the 3D model.

To select one of these events in the Event dialog, set the 3D Model Viewer component as the target.

Actions

The following 3D Model Viewer component actions can be triggered in response to other events:

Event	Description	Configuration options
Set yaw	Changes the model to the specified yaw (rotation around the vertical axis), and pauses the resting animation.	Yaw - The yaw angle in degrees.
Set target yaw	Smoothly rotates the model to the specified yaw.	Target yaw - The yaw angle in degrees, between -360 and 360.
Set target pitch	Smoothly rotates the model to the specified pitch (rotation around the longitudinal axis).	Target pitch - The pitch angle in degrees.
Increment target pitch	Smoothly rotates the model toward the target pitch by the specified amount. If the model has already reached the target pitch, there is no effect.	Pitch delta - The number of degrees to add to the current pitch.
Set target zoom	Smoothly zooms to the specified zoom level.	Target zoom - The zoom level (in meters).
Increment target zoom	Increments the target zoom (in meters).	Zoom delta - Use a negative value to zoom in.
Set target pivot	Changes the point around which rotation occurs, and smoothly moves the camera to where it can orbit around that point.	Target pivot x - The x position (in meters). Target pivot y - The y position (in meters). Target pivot z - The z position (in meters).
Set target local pan	Smoothly shifts the camera to a new position.	Target local pan x - (in meters). Target local pan y - (in meters).
Set material color	Sets the material color.	Material name Red - The red value of the new color (between 0 and 1). Green - The green value of the new color (between 0 and 1). Blue - The blue value of the new color (between 0 and 1).
Play animation	Plays the specified animation.	Animation name
Pause animation	Pauses the specified animation.	Animation name
Set animation time	Seeks the specified time during an animation.	Animation name Animation time - The time to seek (in seconds).

When you select one of these actions in the Event dialog, set the 3D Model Viewer component as the receiver.

Advanced API methods

An additional method is available by using custom code.

getCameraDetails()

Returns an object with details about the current camera settings.

Properties of the returned object:

• yaw - The rotation around the vertical axis in degrees.
• pitch - The rotation around the horizontal axis in degrees.
• zoom - The zoom level in meters.
• x - The x-position around which the camera orbits in meters.
• y - The y-position around which the camera orbits in meters.
• z - The z-position around which the camera orbits in meters.

Advanced users may also want to consult the documentation at https://modelviewer.dev.

Preview

The 3D Model Viewer component can only be previewed in the 3D Editor, or in the browser by clicking the Preview button in the upper right corner.