Google Web Designer 3d Animation

The 3D Model component

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: Internet Explorer and Microsoft Edge do 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.

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: `https://poly.google.com/view/0CkCZrXqCWW` `0CkCZrXqCWW` Refresh the asset You can refresh the 3D asset by clicking the Refresh assets 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.
Transparent 3d model background	Check this box if you want the background of the 3D Model component to be transparent.

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:

https://poly.google.com/view/0CkCZrXqCWW
0CkCZrXqCWW

Refresh the asset

You can refresh the 3D asset by clicking the Refresh assets 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.

Transparent 3d model background Check this box if you want the background of the 3D Model component to be transparent.

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

Events

Events 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.

Actions

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.	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).
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.	Hotspot name

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

Advanced methods (via API)

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 hemi for 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.

Was this helpful?

How can we improve it?