This tutorial will guide you through using the "Rotate Spot on Tap" snippet, which allows you to initiate a rotation animation on specific objects (referred to as "spots") within your VR space when they are tapped. This snippet provides options to customize the rotation angle, duration, easing type, and looping behavior, enabling you to craft smooth and dynamic interactions.
Purpose of the Snippet
The "Rotate Spot on Tap" snippet is designed to trigger a rotation animation on selected spots within your XR scene whenever a user taps on a designated trigger spot. This functionality is particularly useful in scenarios where you want to highlight or animate objects based on user interaction, such as rotating products in a virtual showroom, or spinning objects for educational purposes.
Setting Up the Snippet
This is the Snippet Window with the various fields. We will go through these step by step.
1. Select the Spot(s) to Trigger the Rotate Animation
The first step is to choose the spots that will act as triggers for the rotation animation. These are the spots that users will tap on to initiate the rotation. This field allows you to select one or more spots that will trigger the rotation animation when tapped. These could be any interactive elements, such as 3D models or images within your scene.
2. Choose the Spot(s) to Be Rotated
Next, specify which spots should rotate when the trigger spot is tapped. This field allows you to select the spot(s) that will be rotated upon tapping the trigger spot. You can choose any objects within your scene that you want to respond with a rotation.
3. Set the Rotation Angles
Define the amount of rotation you want to apply to the selected spots along the X, Y, and Z axes. Enter the desired rotation angles in degrees for the X, Y, and Z axes. For example, setting '90' for the X-axis will rotate the spot 90 degrees around the X-axis.
4. Use X, Y, and Z as target rotation
Use the checkbox to specify whether the new rotation should be treated as an absolute position or relative to the current rotation. When enabled, the spot will rotate to the exact specified angles. Otherwise, the rotation will be applied relative to the spot's current rotation.
5. Set the Animation Duration
Control the duration of the rotation animation. Set the duration for the rotation animation in seconds. This determines how quickly the spot rotates to its new orientation.
6. Choose an Easing Type for Smooth Transitions
Easing functions create smooth transitions in the animation, making the rotation feel more natural. Select from a variety of easing options, such as Linear, inBounce, or inOutSine, to control how the rotation accelerates and decelerates during the animation.
7. Configure Looping Behavior to Repeat the Animation
Determine if the rotation should repeat and how it should loop.
loopType: Choose the looping behavior:
- None: No looping.
- Normal: Restarts the animation from the beginning each time.
- Incremental: Continues the rotation in the same direction.
- PingPong: Reverses the rotation direction after each iteration.
8. Number of Playback
Specify how many times the animation should play. Use -1 for an infinite loop.
Conclusion
The "Rotate Spot on Tap" snippet in Fectar Studio provides a powerful way to add interactive rotation animations to objects in your VR scenes. By setting the rotation angles, duration, easing, and looping options, you can create a variety of engaging interactions that respond to user input. Experiment with these settings to craft the perfect rotation behavior for your XR scenes, enhancing user engagement and creating a more immersive experience.