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:
- Open the Components panel, then the Graphics & Effects folder.
- Drag the 3D Model Viewer component to the stage.
- 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.
- 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.
|
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.
|
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:
|
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.
|
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.
|
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.
|
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.
|
Field of view |
The vertical field of view of the camera.
|
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.
|
Camera zoom limits |
|
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.
|
Image |
You can customize the appearance of hotspots by specifying images for different states. All hotspots use the same set of images.
|
Info card styles |
Customize the info card's appearance by setting its colors.
|
Events and actions
EventsEvents 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.
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. |
|
Set target yaw | Smoothly rotates the model to the specified yaw. |
|
Set target pitch | Smoothly rotates the model to the specified pitch (rotation around the longitudinal axis). |
|
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. |
|
Set target zoom | Smoothly zooms to the specified zoom level. |
|
Increment target zoom | Increments the target zoom (in meters). |
|
Set target pivot | Changes the point around which rotation occurs, and smoothly moves the camera to where it can orbit around that point. |
|
Set target local pan | Smoothly shifts the camera to a new position. |
|
Set material color | Sets the material color. |
|
Play animation | Plays the specified animation. |
|
Pause animation | Pauses the specified animation. |
|
Set animation time | Seeks the specified time during an animation. |
|
When you select one of these actions in the Event dialog, set the 3D Model Viewer component as the receiver.
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.