Working with Widgets > 3D > 3D Image
  
3D Image
What Does This Widget Do?
The 3D Image widget allows you to insert a 3D image on the 3D canvas of an AR experience. Supported file formats include:
• .png
• .jpg, .jpeg
• .svg
• .gif
• .bmp
When Should I Use This Widget?
Use an Image when you want to display 3D graphical content or pictures to a user. For example, if you’re trying to describe what a dirty air filter looks like to a service technician, it may be easier just to include an image of a dirty air filter.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
JavaScript
Type
Description
Resource
src
string
Resource being used for the 3D image.
To include an image, you can do one of the following:
• Click next to the field to add a new image file.
• Enter or copy and paste an image URL directly into the field.
• Select an image from the drop-down menu.
Height
height
number
Height of the 3D image in meters. The minimum value is 0.04 meters.
Width
width
number
Width of the 3D image in meters. The minimum value is 0.04 meters.
Class
class
string
The class assigned to the widget.
The following CSS properties are currently supported:
• background-color—sets the fill color of the image
• border-color—sets the color of the border around the image
• border-style—sets the style of the border around the image
• border-radius—rounds the corners of the border around the image
• border-width—sets the stroke width of the border around the image
• border—combines border-color, border-style, and border-width
• padding—applies padding outside the image
For example, in the PROJECT pane, under STYLES, click Application and enter the following in the editor:
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
Colors specified must be CSS colors. If you’re unsure about valid CSS colors, you can do an internet search for “CSS colors.”
Then, in the Class field of the 3D Image, enter: my-image. This refers to content added in Styles > Application.
Scale
scale
string
Scale of the 3D image.
X Coordinate
x
number
Location of the image on the x-axis.
Y Coordinate
y
number
Location of the image on the y-axis.
Z Coordinate
z
number
Location of the image on the z-axis.
X Rotation
rz
number
Rotation of the image about the x-axis.
Y Rotation
ry
number
Rotation of the image about the y-axis.
Z Rotation
rz
number
Rotation of the image about the z-axis.
Billboard
billboard
boolean
Rotates a widget around its center so it is always facing the viewer. It is aligned with the screen.
Occluding
occlude
boolean
If selected, the geometry of a widget is invisible, but at the same time hides any other augmentations behind it in the 3D scene.
Therefore, the background or camera feed appears where the occluded widget should be. This can be used to emphasize some augmentations by hiding surrounding 3D geometry.
Always on top
decal
boolean
Overlays the widgets geometry on any other augmentations in the scene regardless of its depth in the 3D scene. If set to Yes, it will not be hidden by other augmentations.
Opacity (1 Opaque - 0 Transparent)
opacity
number
A number between 0 and 1 that controls the level of transparency of the object. 0=completely transparent and 1=completely opaque.
Pivot
pivot
boolean
Determines the pivot point of the image:
• Top Left
• Top Center
• Top Right
• Middle Left
• Middle Center
• Middle Right
• Bottom Left
• Bottom Center
• Bottom Right
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
1. Drag and drop an 3D Image widget onto the canvas.
2. (Optional) Select the checkbox for Billboard in the DETAILS pane.
3. In the Resource field, select an existing image, add a new image, or enter the URL to the image you want to display.
4. Position the image on the canvas as appropriate.
Style the Widget with CSS
You can use CSS to style the widget! The following is an example of a CSS class you could create and apply:
* 
Keep in mind that it’s best to give your classes unique names so they do not conflict with other classes or OOTB properties.
CSS Example
What It Looks Like
.ptc-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
For more information on implementing CSS classes, see Application Styles.