好玩的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纹理坐标,这里就不深究的,后面可以深入探讨写一篇博客。

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

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

目录
相关文章
|
IDE C# 开发工具
WPF钟表效果实现
中WPF中的RotateTransform实现UI元素的旋转,并模拟钟表的秒针、分针和时针。
1217 0
WPF钟表效果实现
|
IDE 编译器 C#
WPF实现强大的动态公式计算
数据库可以定义表不同列之间的计算公式,进行自动公式计算,但如何实现行上的动态公式计算呢?行由于可以动态扩展,在某些应用场景下将能很好的解决实际问题。本文就探讨一下如何在WPF中实现一种基于行字段的动态公式计算。
1112 0
WPF实现强大的动态公式计算
|
网络协议 C# 移动开发
C# WPF上位机实现和下位机TCP通讯
C# WPF上位机实现和下位机TCP通讯下位机使用北京大华程控电源DH1766-1,上位机使用WPF。实现了电压电流实时采集,曲线显示。上午在公司调试成功,手头没有程控电源,使用TCP服务端模拟。昨天写的TCP服务端正好排上用场。
2438 0
|
C# UED 自然语言处理
在WPF中实现图片一边下载一边显示
原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时:     img.Source = new BitmapImage(new Uri("http://localhost:8000/www/test.jpg")); 只能等到图片下载完成时才能显示出来,当图片较大时需要等待很久,即使在旁边放个进度条给人的感觉仍然不好。
1082 0
|
C#
WPF实现三星手机充电界面
原文:WPF实现三星手机充电界面 GitHub地址:https://github.com/ptddqr/wpf-samsung-phone-s5-charging-ui/tree/master 先上效果图 这个效果来自于三星S5的充电界面,版权归三星所有,这里仅仅是技术实现.
1721 0
|
C# vr&ar
WPF实现物理效果 拉一个小球
原文:WPF实现物理效果 拉一个小球 一直以来都对物理效果有神秘感,完全不知道怎么实现的.直到看到了周银辉在老早前写的一篇博客:http://www.cnblogs.com/zhouyinhui/archive/2007/06/23/793724.
983 0
|
C#
WPF实现Twitter按钮效果
原文:WPF实现Twitter按钮效果 最近上网看到这个CSS3实现的Twitter按钮,感觉很漂亮,于是想用WPF来实现下. 实现这个效果,参考了CSS3 原文地址:http://www.html5tricks.
1254 0
|
XML 自然语言处理 C#
WPF 多语言实现
原文:WPF 多语言实现 很多国际化的程序都提供了多语言的选项,这样方便不同国家的使用者更方便的使用软件。这篇博客中将介绍在WPF中实现多语言的方式。 方式一,使用WPF动态资源的方式实现。先简单介绍下StaticResource和DynamicResource,这两者的区别在于动态资源改变后会实时的体现出来,而静态资源只加载一次,后面对资源的任何改变都不会体现出来。
1602 0
|
C#
WPF 界面实现多语言支持 中英文切换 动态加载资源字典
原文:WPF 界面实现多语言支持 中英文切换 动态加载资源字典 1、使用资源字典,首先新建两个字典文件en-us.xaml、zh-cn.xaml。定义中英文的字符串在这里面【注意:添加xmlns:s="clr-namespace:System;assembly=mscorlib】 zh-cn.
3241 0
|
C#
WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条)
原文:WPF中获取TreeView以及ListView获取其本身滚动条的方法,可实现自行调节scoll滚动的位置(可相应获取任何控件中的内部滚动条) 对于TreeView而言: TreeViewAutomationPeer lvap = new TreeViewAuto...
2427 0