好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果

简介:

这里写图片描述

效果呢就是这么个效果,但是大家要发挥想象力,比如做成一个可以旋转的按钮等等。

定义一个这样的资源就好。

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

关键是在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>

正面:

<Viewport2DVisual3D Material="{StaticResource  DiffuseMaterialStyle }">
    <Viewport2DVisual3D.Geometry>
         <MeshGeometry3D Positions="0,1,0    0,0,0     1,0,0    1,1,0"
              TextureCoordinates="0,0   0,1     1,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="欢迎访问我的博客" Foreground="Green" />
   </Border>
</Viewport2DVisual3D>

右侧:

<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}">
      <Viewport2DVisual3D.Geometry>
            <MeshGeometry3D Positions="1,1,0     1,0,0     1,0,-1     1,1,-1"
                TextureCoordinates="0,0 0,1 1,1 1,0"
                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="感谢您的支持" FontSize="20"/>
       </Border>
</Viewport2DVisual3D>

大家对比上面这两个就知道正面的镂空是怎么来的了……

左侧:

<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}">
      <Viewport2DVisual3D.Geometry>
            <MeshGeometry3D Positions="0,1,-1    0,0,-1   0,0,0    0,1,0"   
            TextureCoordinates="0,0 0,1 1,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="有问题直接评论就好" Foreground="Lime"/>
     </Border>
</Viewport2DVisual3D>

后方:

<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}">
    <Viewport2DVisual3D.Geometry>
        <MeshGeometry3D Positions="1,1,-1    1,0,-1     0,0,-1     0,1,-1   0,0.5,-1"
           TextureCoordinates="0,0    0,1    1,1    1,0"
           TriangleIndices="0 1 2  0 2 4"/>
    </Viewport2DVisual3D.Geometry>
    <Border BorderThickness="1" x:Name="BackSide" BorderBrush="White" CornerRadius="4" 
         PreviewMouseDown="BackSide_PreviewMouseDown" >
        <Border.Background>
           <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
               <GradientStop Color="White" />
           </LinearGradientBrush>
        </Border.Background>
        <TextBlock Text="常来哦……" FontSize="20"/>
   </Border>
</Viewport2DVisual3D>

大家先不管MeshGeometry3D这些东西是做什么的,后面我尽量简单快速的讲解它们。

所以先来看看程序的内部。

    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();
        }
    }

像这种程序肯定会涉及到计时器的,就是DT_Tick方法。我将它设置为每次都转动1度,而下面这一行则是间隔的时间。

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

其余的每个方法都用于调节角度,可以看到在正面时会将角度重置一次。

所以接下来看看Positions是什么意思。

这里写图片描述

原谅我把正方体画歪了,图中另外用箭头指出了“正面”、“右侧”等。

大家看看Positions中都是3个数字一组对吧,这就是一个点,我在图中已经标识出来了。而TriangleIndices中也是3个数字一组,这3个数字指示了Positions中的组合索引(从0开始索引),然后3个数字组成三角形,如图中箭头所指向的。

而TextureCoordinates是WPF的3D纹理坐标,这里就不深究的,后面可以深入探讨写一篇博客。

大家也可以拿源码回去慢慢弄着玩嘛……

所以这篇博客就到此为止咯。掰掰……

目录
相关文章
|
C#
WPF 界面实现多语言支持 中英文切换 动态加载资源字典
原文:WPF 界面实现多语言支持 中英文切换 动态加载资源字典 1、使用资源字典,首先新建两个字典文件en-us.xaml、zh-cn.xaml。定义中英文的字符串在这里面【注意:添加xmlns:s="clr-namespace:System;assembly=mscorlib】 zh-cn.
2901 0
|
IDE C# 开发工具
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转,并模拟钟表的秒针、分针和时针。
1126 0
WPF钟表效果实现
|
IDE 编译器 C#
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
991 0
WPF实现强大的动态公式计算
|
网络协议 C# 移动开发
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1,上位机使用WPF。实现了电压电流实时采集,曲线显示。上午在公司调试成功,手头没有程控电源,使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
2337 0
|
C#
WPF特效-实现3D足球效果
原文:WPF特效-实现3D足球效果 WPF 实现 3D足球效果,效果图如下:  每个面加载不同贴图。                                                          ...
860 0
|
文字识别 C# Windows
通通WPF随笔(4)——通通手写输入法(基于Tablet pc实现)
原文:通通WPF随笔(4)——通通手写输入法(基于Tablet pc实现)          从我在博客园写第一篇博客到现在已经有1年半了,我的第一篇博客写的就是手写识别,当时,客户需求在应用中加入手写输入功能,由于第三方的手写输入法都无法定制界面,所以领导决定自主开发,所以我就很简单地基于Tablet pc写了一个WPF控件,由于几个瓶颈问题,导致这个输入功能只能在我们的UI框架里使用,而无法做到像输入法那样可以输入到任意窗口。
2113 0
|
C# 存储
WPF中在XAML中实现数据类型转换的两种方法
原文:WPF中在XAML中实现数据类型转换的两种方法 熟悉数据绑定的朋友都知道,当我们在Model中获取一个对象的数据,常常需要对其进行数据转换后显示在UI界面上,比如你用bool类型存储了一个人的性别,但是在界面上却需要经过转化后显示为男或女; 今天又把数据绑定部分又看了一下,在这里就算是做个总...
1015 0
|
C#
在WPF中快速实现键盘钩子
原文:在WPF中快速实现键盘钩子 大部分的时候,当我们需要键盘事件的时候,可以通过在主窗口注册KeyBinding来实现,不过,有的时候我们需要的是全局键盘事件,想在任何一个地方都能使用,最开始的时候我是通过键盘钩子来实现的, 不过键盘钩子这种DLL调用的方式怎么都看着不大爽,这里介绍一种通过EventManager快速实现键盘事件感知的例子。
1035 0
|
C#
在WPF中将图片转换成3D图像并可以旋转
原文:在WPF中将图片转换成3D图像并可以旋转 时光偷走的,永远都是我们眼皮底下看不见的珍贵。   https://pan.baidu.com/s/14dk-OU2SR0nxXj2bL4bVpQ 首先先看一下源代码最初的运行效果,是否是自己需要的。
1486 0
|
C#
WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条)
原文:WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条) 对于TreeView而言: TreeViewAutomationPeer lvap = new TreeViewAuto...
2315 0