Vuforia Studio Tutorials and FAQs > Beginner > Bind a 2D Widget to a 3D Model
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
Access to an existing AR project that contains a 3D model (for example, the Add 2D Widgets to a Mobile Experience tutorial)
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.
Slider widget onto canvas
Scroll down on the canvas to view the bottom panel.
3. Ensure that your canvas looks similar to this:
2D canvas with image, text, and slider
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.
Bind value to model
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.
Select Binding Target window
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:
Experience Preview in browser
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).
Experience preview in View on device