Tutorial-Serie: WPF 3D Picture Cube – Animation Teil 1

In diesem mehrteiligen Tutorial will ich mit Euch einen dreidimensionalen Würfel erzeugen, der sich um alle Achsen rotieren kann und zudem durch den Raum „fliegen“ kann.

Der Würfel soll zudem mit verschiedenen Bildern und Farben versehen werden können, sodass jede Würfelseite anders aussehen kann.

In dem folgenden Video könnt Ihr mal sehen, wie das Endprodukt aussehen soll.

Wo Ihr jetzt wisst, wo die Reise hingehen soll, kurz noch ein paar Infos zum 3D-Raum.

Der dreidimensonale Raum wird mit X, Y und der Z-Achse beschrieben, wobei die positive Z-Achse in die Richtung des Betrachters verläuft.

Flächen im dreidimensionalen Raum werden in WPF mit Dreiecken beschrieben.
Warum Dreiecke? – Weil Dreiecke die kleinstmögliche Einheit ist, um eine Fläche darszustellen.

Um ein Rechteck darzustellen benötigen wir also zwei Dreiecke.

Zuerst definieren wir im Visual Basic – Bereich aber erstmal die vier Eckpunkte in einer eigenen Sub:

        Dim P0 As New Point3D(-0.5, -0.5, 0)
        Dim P1 As New Point3D(0.5, -0.5, 0)
        Dim P2 As New Point3D(0.5, 0.5, 0)
        Dim P3 As New Point3D(-0.5, 0.5, 0)

Bitte beachtet, dass Ihr den Namespace System.Windows.Media.Media3D einbinden müsst.

Diese vier Punkte fügen wir nun als Positions einem Drahtgitternetz (Mesh) zu und definieren über TriangleIndices die beiden Dreiecke.

        Dim triangleMesh As New MeshGeometry3D

        triangleMesh.Positions.Add(P0)
        triangleMesh.Positions.Add(P1)
        triangleMesh.Positions.Add(P2)
        triangleMesh.Positions.Add(P3)
        'Dreieck 1
        triangleMesh.TriangleIndices.Add(0)
        triangleMesh.TriangleIndices.Add(1)
        triangleMesh.TriangleIndices.Add(2)
        'Dreieck 2
        triangleMesh.TriangleIndices.Add(2)
        triangleMesh.TriangleIndices.Add(3)
        triangleMesh.TriangleIndices.Add(0)

Dann erzeugen wir eine (vorläufige) Textur und fügen diese mit dem Mesh zusammen einem GeometryModel3D-Objekt zu.

        Dim myMaterial As Material = New DiffuseMaterial(New SolidColorBrush(Colors.DarkGreen))
        Dim triangleModel As New GeometryModel3D(triangleMesh, myMaterial)

Bevor wir jetzt weitermachen definieren wir jetzt erstmal unseren 3D-Raum (Viewport3D) sowie Kamera, Licht etc. im XAML-Bereich unseres WPF-Projektes.

Beachtet bitte, dass ich dem Viewport3D-Objekt dem Namen „mainViewport“ gebe.

 <Grid>
  <Grid.Background>
   <LinearGradientBrush StartPoint="0 0" EndPoint="1 1">
    <GradientStop Color="Aqua" Offset="0"/>
    <GradientStop Color="BlueViolet" Offset="1"/>
   </LinearGradientBrush>
  </Grid.Background>
  <DockPanel
Width="Auto"
VerticalAlignment="Stretch"
Height="Auto"
HorizontalAlignment="Stretch"
Grid.ColumnSpan="1"
Grid.Column="0"
Grid.Row="0"
Margin="0,0,0,0"
Grid.RowSpan="1">
   <Viewport3D Name="mainViewport" ClipToBounds="True">
    <Viewport3D.Camera>
     <PerspectiveCamera x:Name="cam" Position="0,0,4" LookDirection="0,0,-3.5" ></PerspectiveCamera>
    </Viewport3D.Camera>
    <ModelVisual3D>
     <ModelVisual3D.Content>
      <DirectionalLight
Color="White"
Direction="0,0,-1" />
     </ModelVisual3D.Content>
    </ModelVisual3D>
   </Viewport3D>
  </DockPanel>
 </Grid>

Nun weisen wir das oben erzeugte GeometryModel3D-Objekt der Content-Eigenschaft eines ModelVisual3D-Objektes zu, um es dann unserem Viewport zuzuweisen.

Dim Model As New ModelVisual3D
Model.Content = triangleModel
Me.mainViewport.Children.Add(Model)

Wenn Ihr nun in der Sub New Eures Window1 die neue Sub aufruft, dann solltet Ihr folgendes sehen:

Okay, zugegeben, zur Zeit ist es nur ein kleines grünes Rechteck, und da fragt man sich, wofür die ganze Arbeit.

Aber daraus wird noch mehr, versprochen;-)

Denn Ihr dürft nicht vergessen, dass sich dieses Rechteck im dreidimensionalen Raum befindet, und dass man bereits jetzt schon dieses Objekt beliebig drehen und wenden könnte.

Aber dazu komme ich später.

Im nächsten Teil dieser Tutorial-Serie erstellen wir aus verschiedenen Rechtecken endlich unseren Kubus und weisen den einzelnen Würfelseiten unterschiedliche Texturen zu.

Hier geht es zum zweiten Teil der Tutorial-Serie WPF 3D Picture Cube Animation