Bind a 2D Widget to a 3D Model
What You’ll Need
• Access to Vuforia Studio
• A ThingMark to associate your Experience to
• Access to an Experience Service
Steps
For this tutorial, continue using the Tabletop 3D Model Experience. The goal of this tutorial is to add a Slider widget to the Experience, and configure it so that we can rotate the fan model while viewing it in Vuforia Studio.
1. Open Vuforia Studio and then open an existing mobile project that contains a 3D model.
2. With 2D selected from the canvas toolbar, drag and drop a Slider onto the bottom panel on the canvas.
| Scroll down on the canvas to view the bottom panel. |
3. Ensure that your canvas looks similar to this:
4. In the DETAILS pane for the Slider widget, set the following properties:
◦ Maximum to 360
◦ Value to 0
◦ Step to 15
Maximum is the maximum increment in degrees, Value is the initial value that the slider is set to when the Experience loads, and Step is the number of increments that are available on the slider. For example, if you want your model to be able to rotate a full 360 degrees, and you want the user to be able to move the slider to 15 different increments, set the properties as shown above.
5. Next, drag the binding icon
next to the
Value property, and drop it onto
model-1 in the
PROJECT pane.
6. On the Select Binding Target window, select Y Rotation. This ties the numerical value of the slider (0-360) to the angle of the rotation of the model around the Y-axis.
7. Click Preview on the project toolbar. This automatically saves your progress first, and then open the Preview page.
8. Ensure that your preview looks similar to this:
Drag the slider to the right with your mouse, and watch your model rotate!
When you’re finished viewing the preview, close the Preview tab in your browser.
9. If no other changes need to be made, click Publish in the project toolbar.
10. When the progress indicator shows a success message, your project is published to your Experience Service, and you can use Vuforia View to scan the ThingMark you associated to your Experience (for example, 100:2).
