Select Page

2 Axis Animation Controller

The 2 Axis Animation Component enables you to controll the motion of an object by swiping sideways and up and down.


First of all you’ll need an Object that has animations. You can create these animation in your 3D application (e.g. 3ds Max, Maya, Cinema4D, etc.) or within Unity. The two motions you want to control with the X and Y axis of the touch input need to be created as separate motions. So for an example, by swiping left and right you want to control the rotation of you object and by swiping up and down you want to move your object up and down. You will need to separate those two motion in the rotation part and the moving part. Those two motions are mixed by the component while viewing the model.


Lets say you have your model animated in an external software and you have imported into Unity. Select your object from the Assets folder and click on “Rig” in the Import Settings in the Inspector tab.

Set the Animation Type to Legacy and Generation to Store in Root (New) as shown in the screenshot above. Next click on the “Animation” tab. On this tab you can setup the two clips (animation parts) for the 2 Axis Animation component. In this demo case I have created the rotation from frame 0 to 30 and the upwards motion from frame 35 to 65.

You can add a new clip to your animaiton by clicking on the little + icon. Select the clip from the list, give it a proper name and setup the start and end frame by inputing the frame in the text fields below the timeline.

Component Setup

After you dragged you 3D object into an empty scene, you should have an “Animation” component on your object. Add a new Vuframe Scene object and make your 3d object a child of that Vuframe Scene object. Select the object with the Animation component, click on Add Component and search for “2-Axis Animation” hit enter or click on the component to add it to your object. Mow you can add the names of your animation clips, in my case “Rotate” and “Move”, To Axis 1 and Axis 2 State Id fields. Your Setup should look like in the screenshot blow. Run the scene by pressing the play button and depending on your movement while pressing the left mouse button the animations should be controlled as described. You can also tweak the speed of the two motions by increasing or decreasing the values in the Interaction Speed fields.

Was this helpful for you?