This component is being replaced by the 3D Model Viewer component.
The 3D Model component still works in existing documents, but won't be supported in the future. Instead, we recommend that you use the 3D Model Viewer component with the GLB file of your 3D asset, and add hotspots using the built-in 3D Editor. There may be some differences in how your model renders.
The 3D Model component lets you embed a Poly 3D model in your ad that the viewer can rotate, pan, or zoom.
Compatibility
- Ad environments and ad types: This component is not supported for Google Ads, Google AdMob, or AMPHTML ads.
- Browsers: Microsoft Edge does not support the 3D Model component.
To add the 3D Model component to your project:
- Open the Components panel, then the Graphics & Effects folder.
- Drag the 3D Model component to the stage.
- In the 3D Model section of the Properties panel, enter the URL generated from the Poly view page for the model.
When you provide a valid URL or ID, the component on the stage displays a static image based on the model.
Properties
| Property | Description |
|---|---|
| Name | The name of the 3D Model component. |
|
URL |
The URL or ID of the 3D asset. Only assets hosted in Poly are supported. The asset file should be 3 MB or smaller in size (as listed in Poly's info panel), as larger assets may fail to load in Google Web Designer. See the 3D Assets Guide for additional guidelines. URLs should begin with https://poly.google.com/view/. You can find the ID at the end of the Poly view page URL, e.g., https://poly.google.com/view/0CkCZrXqCWW. Examples:
Refresh the assetYou can refresh the 3D asset by clicking the Refresh assets |
| Transparent 3d model background | Check this box if you want the background of the 3D Model component to be transparent. |
button in the URL field. If you don't see any changes, the asset may still be processing and you should wait a minute, then try again.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. |
Events and actions
EventsEvents can be used to trigger other actions in your ad. The 3D Model component sends the following events:
| Event | Description |
|---|---|
| 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. The event.detail object contains all the current properties of the camera. |
| Hotspot clicked | Sent when a hotspot (set in the Poly 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 component as the target.
The following 3D Model 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. |
|
| Look at hotspot | Moves and rotates the camera to focus on the specified hotspot (set in the Poly editor). This action is experimental and may not always work as expected. |
|
When you select one of these actions in the Event dialog, set the 3D Model component as the receiver.
Additional methods are available by using the 3D model viewer API. Set a custom action that uses handleMessage() by passing in an object containing the method name and parameters.
Example:
document.querySelector("gwd-3d-model").handleMessage({
name: 'animateCamera',
cameraPosition: {x: 1, y: 1, z: 1},
pivotPosition: {x: 0, y: 0, z: 0},
duration: 1
});
addHotspot()
Creates a hotspot at the specified position.
Parameters
- hotspotName - hotspot name as a string
- x - x position as a float
- y - y position as a float
- z - z position as a float
animateCamera()
Moves the camera to the specified position and aims it at a specified point.
Parameters
- cameraPosition - an object containing x, y, and z coordinates of the world space position to move the camera to
- pivotPosition - an object containing x, y, and z coordinates of the world space position the camera should point at
- duration - how long the animation should take in milliseconds (0 changes the camera instantly)
incrementAnimationTime()
Jumps the animation forward by the specified number of seconds.
Parameters
- animationName - animation name as a string
- time - amount of time to increment in seconds
setBgColor()
Sets the background color of the viewer.
Parameters
- r - red value as afloat between 0 and 1
- g - green value as a float between 0 and 1
- b - blue value as a float between 0 and 1
setHotspotVisible()
Sets a hotspot to be visible or invisible.
Parameters
- hotspotName - hotspot name as a string
- isVisible - whether to make the hotspot visible, as a boolean
setIblAtlas()
Sets the environment lighting.
Parameters
- iblUrl - image URL to use for image-based lighting, as a string
- intensity - light intensity as a float between 0 and 1
- roughness - roughness as a float between 0 and 1
- setBackground - whether to apply the lighting to the background as a boolean
setLight()
Adjusts the lighting intensity to the specified value.
Parameters
- intensity - light intensity as a float between 0 and 1
- lightType - light type as a string (use
hemifor hemisphere lighting)
setMaterialClearCoat()
Sets the material clear coat.
Parameters
- material - material name as a string
- value - clear coat amount as a float between 0 and 1
- roughness - roughness as a float between 0 and 1
setMaterialEmissive()
Sets the color of a light-emitting material.
Parameters
- material - material name as a string
- r - red value as a float between 0 and 1
- g - green value as a float between 0 and 1
- b - blue value as a float between 0 and 1
Preview
This component can't be previewed inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser by clicking the Preview button in the upper right corner.
