Working with Widgets > 3D > 3D Panel
  
3D Panel
What Does This Widget Do?
The 3D Panel widget is a container that allows you to group widgets and data on the panel to create contrast in a 3D Eyewear experience. A 3D Panel also lets you nest the following widgets under it to allow for grouping:
• 3D Label
• 3D Button
• 3D Gauge
• 3D Checkbox
• 3D Image
• 3D Image Button
• 3D Press Button
• 3D Toggle Button
* 
Once a widget is nested under the 3D Panel widget, its coordinate position is relative to the panel, not the canvas.
How Do I Use This Widget?
Use a 3D Panel when you want to create contrast using a background for other widgets. For example, you could use a 3D panel when you want to make sure a 3D button and 3D gauge are easy to see on a HoloLens experience.
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.
Property
JavaScript
Type
Description
Height
height
number
Height of the 3D button in meters. The minimum value is 0.04 meters.
Width
width
number
Width of the 3D button in meters. The minimum value is 0.04 meters.
Button Color
buttonColor
color
Color of the pin button in the upper-right corner. Select a color from the color picker.
Panel Color
panelColor
color
Color of the panel. Select a color from the color picker.
X Coordinate
x
number
Location of the widget on the x-axis.
Y Coordinate
y
number
Location of the widget on the y-axis.
Z Coordinate
z
number
Location of the widget on the z-axis.
X Rotation
rx
number
Rotation of the widget about the x-axis.
Y Rotation
ry
number
Rotation of the widget about the y-axis.
Z Rotation
rz
number
Rotation of the widget about the z-axis.
Visible
visible
boolean
When this checkbox is selected, the widget is visible at runtime.
Tagalong
tagalong
boolean
Makes the panel stay within the your frontline view and ensures that it placed in a convenient location in the environment.
Users can also pin and unpin the panel when viewing an experience using the pin icon:
This allows individual users viewing an experience to change the Tagalong property.
* 
The bindable properties listed below are only displayed on the Select Binding Target window when binding a property to the 3D Panel widget. For example, if you drag and drop the Pressed property of a 3D Checkbox widget onto the 3D Panel, the Select Binding Target window appears and the three properties below are available to select to bind to the panel.
Bindable Property
JavaScript
Type
Description
Offset X (m)
offsetx
number
Offset of the panel from the user on the X axis (in meters).
Offset Z (m)
offsetz
number
Offset of the panel from the user on the Z axis (in meters).
Snap distance (m)
snap
number
The distance at which the panel will start to move if the user exceeds this distance if Tagalong is selected (in meters).
Service
JavaScript
Description
Show
show
Shows the panel.
Hide
hide
Hides the panel.
Event
JavaScript
Description
Tethered
tethered
Triggered when the panel is switched into follow mode.
Untethered
untethered
Triggered when the panel is taken out of follow mode.
Aligning
aligning
Triggered if the HoloLens aligningnative event is dispatched.
When the Tagalong property is enabled for the panel, the panel follows the user’s movement.
• When the panel begins to move, the aligning event is triggered.
• When the panel stops moving, the aligned event is triggered.
Aligned
aligned
Triggered if HoloLens the aligningnative event is dispatched.
When the Tagalong property is enabled for the panel, the panel follows the user’s movement.
• When the panel begins to move, the aligning event is triggered.
• When the panel stops moving, the aligned event is triggered.
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 a 3D Panel widget onto the canvas.
2. Drag and drop the widgets you want displayed in front of the panel. For this example, we’ve added a 3D Button, 3D Image, and 3D Toggle Button widget.
* 
After you drag and drop the widgets onto the canvas, you’ll need to nest them underneath the panel widget in the VIEWS tree by dragging and dropping them under the panel widget.