The camera behavior allows you to control the point of view using the input device (mouse or touch). To enable the behavior you can add a Chart3DCameraBehavior object in the Behaviors collection of the RadCartesianChart3D control.
Example 1: Defining camera behavior
<telerik:RadCartesianChart3D> <telerik:RadCartesianChart3D.Behaviors> <telerik:Chart3DCameraBehavior/> </telerik:RadCartesianChart3D.Behaviors> </telerik:RadCartesianChart3D>
Additionally, you can control the camera manually through the properties of the behavior.
- Rotating the camera
- Changing the camera distance
- Changing the field of view angle
- Restricting the camera
The camera is rotated when you mouse down on the chart and move the mouse. You can use the behavior's FirstAngle and SecondAngle properties to rotate the camera manually.
Figure 1: Rotating the camera
Example 2: Setting the camera angles
<telerik:Chart3DCameraBehavior FirstAngle="300" SecondAngle="80" />
FirstAngle is the angle between the axis to the right and the projection of the line between the camera position and the plot area center onto the horizontal plane. The axis to the right is considered to be the one that goes to the right when one axis goes up and another goes toward the viewer. The horizontal plane is considered to be the plane that is defined by the right axis and the axis that goes towards the viewer.
Figure 2: FirstAngle example
SecondAngle is the angle between the UpDirection axis and the line between the camera position and plot area center.
Figure 3: SecondAngle example
The camera behavior allows you to define custom key combinations that activate the rotation while dragging. You can do that via the DragToRotateKeyCombinations collection.
Example 3: Defining drag-to-rotate key combination
ChartKeyCombination keyCombination = new ChartKeyCombination(); keyCombination.Keys.Add(Key.LeftCtrl); keyCombination.MouseButtons.Add(MouseButton.Right); cameraBehavior.DragToRotateKeyCombinations.Add(keyCombination);
Example 3 shows how to set the LeftCtrl and the right mouse button as the key combination that allows rotating the camera. Pressing the LeftCtrl and the mouse right button while moving the mouse will change the rotation angles.
To change the distance you can use the mouse wheel. You can use the Distance property to control it manually.
Figure 4: Changing the camera distance
Example 4: Changing the distance
<telerik:Chart3DCameraBehavior Distance="2300" >
The distance has different meaning for different cameras. When a PerspectiveCamera is in use the distance is the radius of the sphere that the camera is positioned on. When an OrthographicCamera is in use the distance is the width of the camera.
To change the field of view you can use the combination between the Shift key and mouse wheel. You can use the FieldOfView property to change the field of view manually.
The field of view angle is available only with a PerspectiveCamera.
Figure 5: Changing the camera distance
Example 5: Manually setting the field of view
<telerik:Chart3DCameraBehavior FieldOfView="45" >
The camera behavior allows you to define custom modifier keys that activate the field of view updating on mouse wheel. You can do that via the FieldOfViewModifierKeys collection. The field of view will be updated when at least one of these keys is pressed.
Example 6: Defining field of view modifier key
Example 6 shows how to define the F key as a field of view modifier key. Pressing F and scrolling the mouse wheel will change the field of view angle.
You can use the MaxDistance, MinDistance, MinSecondAngle, MaxSecondAngle properties to restrict the area that can be observed by the camera.
Example 7: Restricting the camera
<telerik:Chart3DCameraBehavior MinDistance="400" MaxDistance="4000" MinSecondAngle="20" MaxSecondAngle="130" />
The up direction of the camera is defined by the UpDirection property which is a 3D Vector. The default up direction is the Z axis.
When the camera behavior is enabled the lights direction is determined by the camera position. So, when you rotate the camera the lights will also be rotated accordingly to the camera. This behavior can be toggled via the CameraBehavior3D.IsRotationEnabled attached property. Its default value is True. To avoid rotating the light you can set it to False. This is useful when you want to have static lights that illuminate the scene.
Example 8: Disabling the automatic rotation of a light in XAML
<telerik:RadCartesianChart3D.Lights> <DirectionalLight telerik:Chart3DCameraBehavior.IsRotationEnabled="False" /> </telerik:RadCartesianChart3D.Lights>
Example 9: Disabling the automatic rotation of a light in code