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

Nun kommt der zweite Teil meines WPF 3D Tutorials.

Im vorherigen Teil haben wir mit WPF und VB.NET ein zweidimensionales Rechteck im 3D-Raum erstellt.

In dieser Folge erstellen wir nun endlich unseren 3D-Körper, welcher sich später auch durch den Raum bewegen soll.

Um einen Würfel zu erstellen benötigen wir aber nicht nur ein Rechteck sondern sechs Rechtecke.

Deshalb verlagern wir den Rechteck-Code in eine seperate Funktion mit dem Namen Paint3DRectangle, welche ein GeometryModel3D-Objekt zurück gibt.

Function Paint3DRectangle(ByVal P0 As Point3D, ByVal P1 As Point3D, ByVal P2 As Point3D, ByVal P3 As Point3D, _
ByVal TextureP0 As Point, ByVal TextureP1 As Point, ByVal TextureP2 As Point, ByVal TextureP3 As Point, _
ByVal Texture As Material) As GeometryModel3D

Dim triangleMesh As New MeshGeometry3D

triangleMesh.Positions.Add(P0)
triangleMesh.Positions.Add(P1)
triangleMesh.Positions.Add(P2)
triangleMesh.Positions.Add(P3)

triangleMesh.TriangleIndices.Add(0)
triangleMesh.TriangleIndices.Add(1)
triangleMesh.TriangleIndices.Add(2)

triangleMesh.TriangleIndices.Add(2)
triangleMesh.TriangleIndices.Add(3)
triangleMesh.TriangleIndices.Add(0)

triangleMesh.TextureCoordinates.Add(TextureP0)
triangleMesh.TextureCoordinates.Add(TextureP1)
triangleMesh.TextureCoordinates.Add(TextureP2)
triangleMesh.TextureCoordinates.Add(TextureP3)

Dim triangleModel As New GeometryModel3D(triangleMesh, Texture)

Return triangleModel
End Function

Nun können wir mit dieser Funktion sechs quadratische Seitenflächen erstellen, welche dann in einem Model3DGroup-Objekt als jeweilige Kind-Objekte zusammengefasst werden.

Dim geometryFront As New GeometryModel3D
Dim ResultModel3DGroup As New Model3DGroup

geometryFront = Paint3DRectangle(pointA, pointB, pointC, pointD, TextureP0, TextureP1, TextureP2, TextureP3, materialFront)

'nun der Gruppe hinzufuegen
ResultModel3DGroup.Children.Add(geometryFront)

Damit wir aber auch einen dreidimensionalen Würfel erhalten müssen wir unserer Funktion für jede Würfelseite auch die richtigen Koordination bzw. Parameter übergeben.

Um uns das Leben etwas einfacher zu machen hab ich uns erstmal eine kleine Zeichnung mit den Eckpunkten des Kubus erstellt.

Wir erstellen nun für jeden Eckpunkt erstmal ein Point3D-Objekt.

'Quadrat hinten
Dim pointA As New Point3D(-0.5, -0.5, 0.5)
Dim pointB As New Point3D(0.5, -0.5, 0.5)
Dim pointC As New Point3D(0.5, 0.5, 0.5)
Dim pointD As New Point3D(-0.5, 0.5, 0.5)

'Quadrat vorne
Dim pointE As New Point3D(-0.5, -0.5, -0.5)
Dim pointF As New Point3D(0.5, -0.5, -0.5)
Dim pointG As New Point3D(0.5, 0.5, -0.5)
Dim pointH As New Point3D(-0.5, 0.5, -0.5)

Um die Texturen nachher auf den Rechtecken zu platzieren erstellen wir vier Standard-Texture-Points, welche wir jedes Mal der Rechtfunktion übergeben.

Dim TextureP0 As New Point(0, 1)
Dim TextureP1 As New Point(1, 1)
Dim TextureP2 As New Point(1, 0)
Dim TextureP3 As New Point(0, 0)

Und schließlich benötigen wir sechs Texturen, die auf den verschiedenen Seiten angezeigt werden sollen.

Hierbei könnt Ihr Farben wie auch Bilder natürlich frei wählen.

'Beispiel für Bild-Textur-------------------------
Dim materialBack As New DiffuseMaterial
Dim imgBack As New ImageBrush

imgBack.ImageSource = New BitmapImage(New Uri("D:\Bilder\Der-Softwareentwickler-Blog.png"))
imgBack.Stretch = Stretch.Fill
materialBack.Brush = imgBack

'Beispiel für Farbtextur-------------------------
Dim materialRight As New DiffuseMaterial
Dim imgRight As New ImageBrush

materialRight.Brush = New SolidColorBrush(Colors.Yellow)

Nun können wir unsere sechs Seitenflächen erstellen und diese in einem Model3DGroup-Objekt (siehe oben) zusammenfassen.

Falls Ihr beim Zusammenpuzzeln der Eckpunkte durcheinander kommt, hier nochmal meine Aufrufe der Paint3DRectangle-Funktion zur Erzeugung der Würfelflächen (Model3DGroup-Objekte):

geometryFront = Paint3DRectangle(pointA, pointB, pointC, pointD, TextureP0, TextureP1, TextureP2, TextureP3, materialFront)

geometryBack = Paint3DRectangle(pointF, pointE, pointH, pointG, TextureP0, TextureP1, TextureP2, TextureP3, materialBack)

geometryRight = Paint3DRectangle(pointB, pointF, pointG, pointC, TextureP0, TextureP1, TextureP2, TextureP3, materialRight)

geometryLeft = Paint3DRectangle(pointE, pointA, pointD, pointH, TextureP0, TextureP1, TextureP2, TextureP3, materialLeft)

geometryTop = Paint3DRectangle(pointD, pointC, pointG, pointH, TextureP0, TextureP1, TextureP2, TextureP3, materialTop)

geometryBottom = Paint3DRectangle(pointE, pointF, pointB, pointA, TextureP0, TextureP1, TextureP2, TextureP3, materialBottom)

Nun können wir unsere Model3DGroup der Content-Eigenschaft eines ModelVisual3D-Objektes zuweisen, welches wir dann unserem Viewport hinzufügen (siehe auch den ersten Teil dieser Tutorial-Serie).

Dim Model As New ModelVisual3D

Model.Content = ResultModel3DGroup
Me.mainViewport.Children.Add(Model)

Wenn Ihr nun Euer Programm startet solltet Ihr wie im ersten Teil wieder nur eine Quadratische Fläche sehen.

Dies liegt daran, weil Ihr frontal auf Euren Würfel schaut.

Um dies zu ändern, verändert Ihr einfach den Standort sowie die Blickrichtung Eurer PerspectiveCamera auf zum Beispiel:

Position="2,1,4" LookDirection="-2,-1,-3.5"

Und wenn Ihr jetzt auch noch die die anderen Flächen beleuchtet haben wollt (Ihr solltet nun die Ober- und die rechte Seite schwarz sehen) müsst Ihr noch die Richtung Eurer DirectionalLight – Beleuchtung etwas anpassen:

Direction="-1,-1,-1"

Jetzt solltet Ihr etwas Ähnliches wie auf diesem Bild sehen:

Lest im dritten Teil des WPF 3D Animation Tutorials wie Ihr den Würfel durch den dreidimensionalen Raum fliegen lassen könnt.