Fun WPF: Use Viewport2DVisual3D to achieve 3D Rotation,

Fun WPF: Use Viewport2DVisual3D to achieve 3D Rotation,

The effect is such an effect, but everyone needs to use their imagination, such as making a button that can be rotated.

Define such a resource.

<Window.Resources>        <DiffuseMaterial x:Key="DiffuseMaterialStyle" Viewport2DVisual3D.IsVisualHostMaterial="True"                          Brush="White"/></Window.Resources>

The key is to put such a thing in the Grid:

 <Viewport3D x:Name="view" ClipToBounds="True" RenderOptions.EdgeMode="Aliased">                     <Viewport3D.Camera>          <PerspectiveCamera x:Name="perspectiveCam" FieldOfView="59" Position="0.5,0.5,2" LookDirection="0,0,-1">              <PerspectiveCamera.Transform>                   <RotateTransform3D x:Name="rot" CenterY="0.5" CenterX="0.5" CenterZ="-0.5">                        <RotateTransform3D.Rotation>                                <AxisAngleRotation3D x:Name="AxisAngleRot" Axis="0,1,0" Angle="0"/>                        </RotateTransform3D.Rotation>                   </RotateTransform3D>               </PerspectiveCamera.Transform>           </PerspectiveCamera>      </Viewport3D.Camera>                            <ModelVisual3D>          <ModelVisual3D.Content>               <AmbientLight Color="White" />          </ModelVisual3D.Content>      </ModelVisual3D></Viewport3D>

Front:

<Viewport2DVisual3D Material = "{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D. geometry> <MeshGeometry3D Positions = ", 0, 0, 0, 0 "TextureCoordinates =" 0, 0, 1, 1, 0 "TriangleIndices =" 0 1 2 0 2 3 "/> </Viewport2DVisual3D. geometry> <Border BorderThickness = "10" x: name = "FrontSide" BorderBrush = "Blue" CornerRadius = "1" PreviewMouseDown = "FrontSide_PreviewMouseDown"> <TextBlock Text = "Welcome to my blog" Foreground = "Green"/> </Border> </Viewport2DVisual3D>

Right side:

<Viewport2DVisual3D Material = "{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D. geometry> <MeshGeometry3D Positions = ", 0, 0,-1, -1 "TextureCoordinates =", "TriangleIndices =" 0 1 2 0 2 3 "/> </Viewport2DVisual3D. geometry> <Border BorderThickness = "1" x: Name = "RightSide" BorderBrush = "Lime" CornerRadius = "4" PreviewMouseDown = "RightSide_PreviewMouseDown"> <Border. background> <LinearGradientBrush EndPoint = "0.5, 1" StartPoint = "0.5, 0"> <GradientStop Color = "White"/> </LinearGradientBrush> </Border. background> <TextBlock Text = "thank you for your support" FontSize = "20"/> </Border> </Viewport2DVisual3D>

By comparing the two above, we will know how the front hollow-Out came from ......

Left side:

<Viewport2DVisual3D Material = "{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D. geometry> <MeshGeometry3D Positions = ",-1,-1, 0, 0 "TextureCoordinates =" 0, 0, 1, 1, 0 "TriangleIndices =" 0 1 3 0 2 3 "/> </Viewport2DVisual3D. geometry> <Border BorderThickness = "40" x: Name = "LeftSide" BorderBrush = "White" CornerRadius = "1" PreviewMouseDown = "LeftSide_PreviewMouseDown"> <Border. background> <LinearGradientBrush EndPoint = "0.5, 1" StartPoint = "0.5, 0"> <GradientStop Color = "Black"/> </LinearGradientBrush> </Border. background> <TextBlock Text = "comment directly if you have any questions" Foreground = "Lime"/> </Border> </Viewport2DVisual3D>

Rear:

<Viewport2DVisual3D Material = "{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D. geometry> <MeshGeometry3D Positions = "0.5,-1,-1,-1,-1 0, -1 "TextureCoordinates =", "TriangleIndices =" 0 1 2 0 2 4 "/> </Viewport2DVisual3D. geometry> <Border BorderThickness = "1" x: Name = "BackSide" BorderBrush = "White" CornerRadius = "4" PreviewMouseDown = "BackSide_PreviewMouseDown"> <Borde R. background> <LinearGradientBrush EndPoint = "0.5, 1" StartPoint = "0.5, 0"> <GradientStop Color = "White"/> </LinearGradientBrush> </Border. background> <TextBlock Text = "coming soon ...... "FontSize =" 20 "/> </Border> </Viewport2DVisual3D>

No matter what MeshGeometry3D is, I will try to explain it as quickly as possible.

So let's take a look at the program's interior.

    public partial class MainWindow : Window    {        DispatcherTimer dispatTime = null;        double AxAngle = 90;        public MainWindow()        {            InitializeComponent();            if (dispatTime == null)                dispatTime = new DispatcherTimer();            dispatTime.Tick += new EventHandler(DT_Tick);            dispatTime.Interval = new TimeSpan(0, 0, 0, 0, 2);        }                               private void DT_Tick(object sender, EventArgs e)        {            AxisAngleRot.Angle += 1;            if (AxisAngleRot.Angle >= AxAngle)                dispatTime.Stop();        }        private void FrontSide_PreviewMouseDown(object sender, MouseButtonEventArgs e)        {            AxisAngleRot.Angle = 0;            AxAngle = 90;            dispatTime.Start();        }        private void LeftSide_PreviewMouseDown(object sender, MouseButtonEventArgs e)        {            AxAngle = 360;            dispatTime.Start();        }        private void BackSide_PreviewMouseDown(object sender, MouseButtonEventArgs e)        {            AxAngle = 270;            dispatTime.Start();        }        private void RightSide_PreviewMouseDown(object sender, MouseButtonEventArgs e)        {            AxAngle = 180;            dispatTime.Start();        }    }

A program like this will certainly involve a timer, that is, the DT_Tick method. I set it to rotate 1 degree each time, and the following line is the interval.

dispatTime.Interval = new TimeSpan(0, 0, 0, 0, 2);

Each of the other methods is used to adjust the angle. You can see that the angle is reset once on the front.

So let's take a look at what Positions means.

Forgive me for drawing the cube, and I used arrows to point out the front and right sides of the cube.

Let's take a look at Positions. There are three numbers, right? This is a point. I have marked it in the figure. TriangleIndices is also a group of three numbers, which indicate the combination index in Positions (starting from 0), then the three numbers form a triangle, pointed by the arrow in.

TextureCoordinates is the 3D texture coordinate of WPF. We will not go into it here. I will discuss it in detail later.

You can also use the source code to go back and get started ......

So this blog is so far. Cutting-edge ......