Navigating Vuforia Studio > Widgets > 3D > 3D Press Button
3D Press Button
This widget is only available in 3D Eyewear projects.
What Does This Widget Do?
The 3D Press Button widget allows you to utilize fully articulated hand tracking on a HoloLens 2. You can also Gaze and Air tap a 3D Button if using a HoloLens.
When Should I Use This Widget?
A 3D Press Button is particularly useful when you want to trigger an event. For example, a 3D Press Button can be used to start playing a sequence.
The 3D Press Button is extremely useful when the Experience will be viewed on a HoloLens 2 and you want to utilize articulated hand tracking. However, the 3D Press Button can be used for any user actions similar to the 3D Label and 3D Image widgets.
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.
Text that appears on the button.
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.
Supported file formats include:
Height of the button in meters. The minimum value is 4 cm.
Width of the button in meters. The minimum value is 4 cm.
Font Color
Color of the font. Select a color from the color picker.
Button Color
Color of the button. Select a color from the color picker.
Triggered when the button is pressed. If the button is disabled, the event is not 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
This widget is best used with a 3D Panel.
1. Drag and drop a 3D Panel widget onto the canvas.
2. Drag and drop a 3D Press Button widget onto the canvas. Move the widget to position where you want it.
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.
3. Enter the text you want displayed in the Text field or bind a data property to the Text field of the widget. For this example, we’ve used Submit.
4. Add the following code to Home.js:
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;

You must include a line for each widget that is nested under the 3D Panel under $scope.hidePanel = function(){. For our example, we included a 3D Image, 3D Checkbox, and a 3D Label on the panel, so the following was added to Home.js:
$scope.hidePanel = function(){
$scope.view.wdg['3DPanel-1']['visible'] = false;
$scope.view.wdg['3DPressButton-1']['visible'] = false;
$scope.view.wdg['3DImage-1']['visible'] = false;
$scope.view.wdg['3DCheckbox-1']['visible'] = false;
$scope.view.wdg['3DLabel-1']['visible'] = false;

This ensures that all widgets nested under the panel are also hidden when the Submit 3D Press Button is clicked.
5. Navigate back to the Details pane of the 3D Press Button, an scroll down to Events.
6. Click JS next to the Pressed event, and enter hidePanel().