Invoke a Function Using a Gesture in a 3D Eyewear Experience
What You’ll Need
• Access to Vuforia Studio
• Access to an Experience Service
• Access to the Blue Pump
.pvz. Navigate to the
Vuforia Studio Portal, and under
Add an Animated Sequence to your Experience!, click
Blue pump exercise to download the
BluePumpKit.zip file. Extract the contents of the
.zip file to a location on your system.
• A Microsoft HoloLens device
Steps
2. Drag and drop a 3D Label onto the canvas, and position the label to where you want it.
3. In the DETAILS pane of the 3D Label, enter white in the Font Color field. This will ensure that the label appears when viewing the Experience on the HoloLens.
4. Click Home.js in the PROJECT pane. Enter the following in the JavaScript editor:
$scope.rotateLabelRight = function() {
$scope.view.wdg['3DLabel-1']['ry'] += 15;
};
$scope.rotateLabelLeft = function() {
$scope.view.wdg['3DLabel-1']['ry'] -= 15;
};
Where 15 is the number of degrees that the label rotates when the function is invoked. Change this number to make the rotation increment smaller or larger.
5. Click Home under VIEWS to return to the canvas.
6. Next, click the JS icon next to the swipeleft application event, and enter the following in the expression box: viewCtrl.rotateLabelLeft();
7. Then, click the JS icon next to the swiperight application event, and enter the following in the expression box: viewCtrl.rotateLabelRight();
8. Click Preview in the Studio toolbar.
9. Ensure that your preview looks similar to this:
◦ Click

next to
swipeleft to rotate the label to the left.
◦ Click

next to
swiperight to rotate the label to the right.
10. If you’re happy with the preview, click Publish.
11. Finally, put on your HoloLens and scan the ThingMark that’s associated with your Experience. Use the swipe right or swipe left gesture, and watch the 3D label rotate! For more information on gestures, see
3D Eyewear Projects.