文档章节

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

NoMasp
 NoMasp
发布于 2015/09/08 21:45
字数 834
阅读 60
收藏 0

这里写图片描述

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

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

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

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

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

版权声明:本文为 NoMasp柯于旺 原创文章,未经许可严禁转载!欢迎访问我的博客:http://blog.csdn.net/nomasp

本文转载自:http://blog.csdn.net/nomasp/article/details/46567895

NoMasp
粉丝 7
博文 334
码字总数 0
作品 0
镇江
程序员
私信 提问
加载中

评论(0)

nomasp 博客导读:Lisp/Emacs、Algorithm、Android

版权声明:转载请联系本人,感谢配合!本站地址:http://blog.csdn.net/nomasp https://blog.csdn.net/NoMasp/article/details/44966625 Profile Introduction to Blog 您能看到这篇博客导读...

nomasp
2015/09/17
0
0
从零开始学 Web 之 CSS3(五)transform

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
2018/08/04
0
0
【WPF学习】第四十一章 变换

  通过使用变换(transform),许多绘图任务将更趋简单;变换是通过不加通告地切换形状或元素使用的坐标系统来改变形状或元素绘制方式的对象。在WPF中,变换由继承自System.Windows.Media.Tr...

Peter.Luo
02/15
0
0
MugLife静态照片变3D动画算法研究

MugLife app是一款可以将静态照片变成3D动画的手机应用,如下效果图所示: 大家可以看到,这个静态图具有了类3D的动画特效,是不是很好玩? 这种算法是如何实现的呢? 这里给出一篇论文“Bri...

trent1985
2018/03/09
0
0
WPF通过鼠标滑轮缩放显示图片

如果你使用WinForm比较难实现通过滚动鼠标滑轮来对图片进行缩放显示,那么,你应该考虑一下使用WPF,既然是下一代Windows客户端开发平台,明显是有一定优势的,不然,MS是吃饱了撑着。 首先,...

junwong
2012/04/18
694
0

没有更多内容

加载失败,请刷新页面

加载更多

1.4掌握日志工具的使用——Android第一行代码(第二版)笔记

Android中的日志工具类是Log(android.util.Log),这个类中提供了如下5个方法来供我们打印日志。 Log.v():用于打印那些最为琐碎的、意义最小的日志信息。对应级别verbose,是Android日志里面...

Cy23
17分钟前
33
0
System.currentTimeMillis和System.nanoTime

精度与 精确 我想知道的是在更新对象在游戏中的位置时应该使用System.currentTimeMillis()还是System.nanoTime() ? 他们的运动变化与自上次通话以来经过的时间成正比,我想尽可能地精确...

javail
23分钟前
29
0
Linux就该这么学 -- 命令 - man

man命令用于查看某个命令的帮助信息 格式:man 命令名称 man man 表示查询man命令本身的帮助信息 man ls 表示查询ls命令的帮助信息 由于命令查询出来的内容一般都比较多,所以要了解相关的组...

jionzhao
25分钟前
15
0
Bmob后端云(云数据库表的具体操作)

1.注册创建应用请看该博客 Bomb基本操作 2.创建云数据库表 2.1 步骤一: 点击添加表 2.2 步骤二: 填写表信息 2.3 表结构详解 3. 操作表 3.1 添加一个表字段 3.1.1 步骤一: 点击添加列 3.1.2 ...

漫路h
26分钟前
23
0
Spring Bean的生命周期?

Spring Bean的生命周期简单易懂。在一个bean实例被初始化时,需要执行一系列的初始化操作以达到可用的状态。同样的,当一个bean不在被调用时需要进行相关的析构操作,并从bean容器中移除。 ...

无名氏的程序员
27分钟前
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部