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: Microsoft Edge does not support the 3D Model component.

To add the 3D Model component to your project:

1. Open the Components panel, then the Graphics & Effects folder.
2. Drag the 3D Model component to the stage.
3. 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: 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.