Tutorial: Rotate a 3D model

In this tutorial you learn how to rotate with a swiping gesture a 3D model in your Kanzi application.

This video shows the result of the tutorial.

This tutorial assumes you understand the basics of working with Kanzi Studio. The best entry points for getting familiar with Kanzi Studio are:

• Tutorial: Getting started with Kanzi Studio
• Tutorial: Create a simple in-vehicle infotainment application

Assets for the tutorial

The starting point of this tutorial is the Rotation.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Rotation/Assets directory.

The <KanziWorkspace>/Tutorials/Rotation/Completed directory contains the completed project of this tutorial.

Create a Scroll View 2D and connect it to the camera

In this section you create a Scroll View node and connect it to the camera that shows the model you want to rotate. After opening the starting point project you first create a Scroll View 2D node which you use to control the rotation of the model, then you bind the Render Transformation property of the camera that shows the car model to the Scroll Position property in the Scroll View 2D node to rotate the car model.

To create a Scroll View 2D and connect it to the camera:

1. In Kanzi Studio open the project stored in <KanziWorkspace>/Tutorials/Rotation/Assets.
   The project contains the Car prefab that contains a model of a car, lights, camera, and the floor below the car.
   
2. In the Project press Alt and right-click the RootPage and select Scroll View 2D.
   Use the Scroll View nodes to define an area where to generate scrolling messages in response to user input and physics-based animation.
   
3. In the Project select the RootPage > Viewport 2D > Car > RootNode > Scene_Root > Camera_Root node, in the Properties click next to the Bindings property to add that property, and in the Binding Argument Editor set:
   • Property to Render Transformation
   • Attribute to Rotation
   • Expression to

     CreateRotationY({@../../../../../Scroll View 2D/ScrollViewConcept.ScrollPosition}.VectorX)

   Click Save.
   Scroll Position is a read-only property you can use to find out the current values of the x and y axes of the Scroll View 2D node. With this binding expression you get the position of the Scroll View 2D node on the x axis to rotate the camera on the y axis.
   
   
   TIP

   When you write expressions for bindings in the Binding Argument Editor, the fastest and most accurate way to add nodes and their properties to an expression is to drag them from the Properties to the Expression editor in the Binding Argument Editor.

   For example, to bind to the Scroll Position property from the Scroll View 2D node:

   1. In the Project select the Scroll View 2D node.
   2. In the Properties right-click and select Add Property > Scroll View > Scroll Position.
      
   3. From the Properties drag the Scroll Position property to the Expression field in the Binding Argument Editor. Then enter .VectorX to bind to the Vector_X field of the Scroll Position property.

In the Preview you can now rotate the model when you click and drag the model. However, the model does not rotate much and it rotates around an axis that is far from the model. You adjust this in the next section.

Adjust the camera and properties of rotation

In this section you first set the axis around which the Scroll View 2D node rotates the model and the position of the camera that shows the model, then you use the properties in the Scroll View 2D node to fine-tune how the Scroll View node rotates the model.

To adjust the camera and properties of rotation:

1. In the Project select the RootPage > Viewport 2D > Car > RootNode > Scene_Root > Camera_Root, and in the Properties set the Render Transformation property Translation Z property field to 0.
   The Camera_Root node contains the Camera node that shows the scene and sets the axis of rotation for the Camera node.
   
2. In the Project select the RootPage > Viewport 2D > Car > RootNode > Scene_Root > Camera_Root > Camera, and in the Properties set the Render Transformation property Translation Z property field to -5.
   Now when you rotate the model it rotates around the y axis positioned at the center of the model.
   
3. In the Project select the Scroll View 2D node and in the Properties add and set these properties to adjust the rotation:
   • Scroll Sensitivity to -100
     Scroll Sensitivity property sets how much the position changes relative to the movement of the pointer that starts the swiping. The higher the value the more the position of the object controlled by the Scroll View node changes. Negative values move the object in the opposite direction.
   • Sliding Accerelation to 20
     Sliding Accerelation property sets the acceleration of the object after you release the pointer with which you swipe. Use low values when you want the object controlled by the Scroll View node to slowly reach the final position. Use high values when you want the object to quickly reach the final position .
   • Sliding Drag to 40
     Sliding Drag property sets how much drag affects the movement of the object after you release the pointer with which you swipe. The lower the value the higher the drag and the faster the sliding of the object controlled by the Scroll View node stops.
   With the Sliding Accerelation and Sliding Drag properties you can adjust how a Scroll View node moves an object after you release the pointer with which you swipe. For example, after you release the mouse button, or lift the finger off a device screen. To adjust how a Scroll View node moves an object while you are still holding down the pointer with which you swipe, use the Dragging Acceleration, Dragging Drag, and Dragging Impulse properties.
   

Now when you click and drag the model in the Preview it rotates around the y axis positioned at the center of the model, and smoothly stops.

What's next?

In this tutorial you learned how to rotate a 3D model using the Scroll View control. You can further adjust the values of the Scroll View 2D node properties that define the rotation to get the result you want. For example, you can use the Dragging Acceleration, Dragging Drag, and Dragging Impulse to set how the model moves while you are still holding down the pointer with which you swipe the model.

You can also:

• Learn how to control the position of gauge needles with custom properties. See Tutorial: Create gauges.
• Learn how to create reflections. See Tutorial: Create reflections.

See also

To learn more about what you can achieve with bindings, see Using bindings.

To learn more about creating Kanzi applications, see Tutorials.

To find out more about Kanzi Studio features, see Working with ....

Open topic with navigation