Animating a Perspective 3D Model

Animating a Perspective 3D Model

Position and size of a Perspective 3D model

Perspective 3D objects are created by default at (0, 0, 0) or around. Their dimensions are of one unit, or close to one unit. To modify the size or position of these models, it is necessary to apply to them 3D WPF transformations.

But why Wpf3D models don't have properties making it possible to manage their size and position ? The 2 reasons are modularity and performance :

  • Modularity, because the model design is independent of model use (scaling, moving, rotation).
  • Performance because the 3D transformations are managed by the graphics processor (GPU), which frees the main processor (CPU).

Animating a basic Perspective 3D model

To animate a Perspective 3D model, we just have to animate the transformations which are applied to it.

I will describe here how to make turn on itself a panel (of Square3D type) while moving it.

Animated panel - Click for online demo

Rotation is defined by means of a RotateTransform3D object, and moving is defined by means of a TranslateTransform3D. The 2 transformations are gathered in a Transform3DGroup object, itself assigned to the Transform property of the Square3D. The transformations which are the object of the animation must be indicated by a name through the x:Name attribute. It is useless to give a value to the animated properties (that will be done in the animation definition).

<p:Square3D 
    Material="{StaticResource GlossyMaterial}" 
    BackMaterial="{StaticResource GlossyMaterial}">
    <p:Square3D.Transform>
        <Transform3DGroup>
            <RotateTransform3D CenterX="0.5">
                <RotateTransform3D.Rotation>
                    <AxisAngleRotation3D 
                        x:Name="modelRotation" 
                        Axis="0,1,0" />
                </RotateTransform3D.Rotation>
            </RotateTransform3D>
            <TranslateTransform3D 
                x:Name="squareTranslation"/>
        </Transform3DGroup>
    </p:Square3D.Transform>
</p:Square3D>

Animations are gathered in a Storyboard. Each one refers to a given property (TargetProperty) of a given transformation (TargetName). The Storyboard is started on the Loaded event of the window by means of a Viewport3D or Workshop3D Trigger.

Workshop3D is a Perspective class. This is a ready to use viewport for 3D models, with light, moveable camera and camera control panel. The camera can be controlled by mouse (with joysticks) or by keyboard.

<p:Workshop3D.Triggers>
    <EventTrigger RoutedEvent="p:Workshop3D.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0" To="10" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetX" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="5" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetY" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="15" Duration="0:0:4" 
                       Storyboard.TargetName="squareTranslation"
                       Storyboard.TargetProperty="OffsetZ" RepeatBehavior="Forever"/>
                    <DoubleAnimation From="0" To="360" Duration="0:0:2" 
                       Storyboard.TargetName="modelRotation"
                       Storyboard.TargetProperty="Angle" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</p:Workshop3D.Triggers>

The source code is available in the Square3DAnimation.xaml file from project PerspectiveDemo.UI, folder Pages/pWpf3D.

Animating a composite 3D model

Several elementary 3D objects may be gathered in a ModelVisual3D or a ContainerUIElement3D (a container object). A transformation applied to this container applies broadly to the various objects which compose it. A container can also contain other container objects, which each one can use transformations. Thus it is possible to animate independently the various parts of a composite model.

The Gyroscope3D Perspective class uses this technique. The animation is triggered when you click on the gyroscope.

Animated gyroscope - Click for online demo

The visual appearence of Gyroscope3D is defined in a skin by the file Gyroscope3D.xaml (assembly Perspective.Wpf3D, folder Skins). The general organization of the file is as follows:

  • Composite rotor and axis : transformation PART_RotorRotation.
  • Inner ring.
  • Composite model composed by 2 external rings : transformation PART_RingModelRotation. External ring : transformation PART_FrameRingRotation.

The first animation is applied to the PART_RotorRotation transformation and thus established for the rotor. The composite model composed by the 2 external rings is animated through an animation applied to RingModelRotation. Within this pair of rings, the outside ring uses itself an animation (applied to FrameRingRotation).

About this article

Author : Olivier Dewit

History :

  • the 15th may, 2008 : adaptation to Perspective 0.9.
  • the 23rd december, 2006 : creation.