Navigating Vuforia Studio > 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:
.jpg, .jpeg
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.
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.
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 of the 3D image.
X Coordinate
Location of the image on the x-axis.
Y Coordinate
Location of the image on the y-axis.
Z Coordinate
Location of the image on the z-axis.
X Rotation
Rotation of the image about the x-axis.
Y Rotation
Rotation of the image about the y-axis.
Z Rotation
Rotation of the image about the z-axis.
Rotates a widget around its center so it is always facing the viewer. It is aligned with the screen.
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
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. Typically this can be used for labels or sensors that must always remain visible.
Opacity (1 Opaque - 0 Transparent)
A number between 0 and 1 that controls the level of transparency of the object. 0=completely transparent and 1=completely opaque.
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.