在Expression Blend中使用XAML建立3D应用程序
参考微软<Creating 3D Content with WPF>文档翻译。
源文件下载 http://www.wangpangzi.net/uploads/200703/3dlab.zip
本文的目的是在Blend环境中研究Windows Presentation Foundation(WPF)的3D特性,首先我们导入一个已经建立好的3D模型到程序中,使用动画让其旋转。然后,我们会研究如何动态的使用代码生成模型。最后我们会把2D的用户界面映射到3D模型上,用户并可以与其交互。
注意,源文件中的源代码是为每个阶段而设计的,因此你可以从中间开始学习或者做阶段备份之用。每个练习也包含了一份完整的完成后源代码,你可以直接通过它们查看最终结果。
练习一 使用静态3D模型(共4个任务)
在本练习中,你将会导入一个已经建立好的3D模型,并使用Viewport3D对象把它显示出来,然后使用动画让他旋转起来。最后,用户可以使用鼠标旋转这个模型。
任务1 导入3D模型。
虽然我们可以使用XAML直接建立3D模型了,但对于稍微复杂的模型来说,我们最好使用专业工具建立模型,再导出成XAML格式供我们使用。在本练习中,我们将会使用一个用这种方式建立的3D模型,即一个XAML文件。并将其导入Blend中。
1.打开Microsoft Expression Blend.
2.运行File > New Project…建立新程序。
3.在弹出的New Project 窗口中选择Standard Application,在Name中输入Show3DModel, 选择你的保存文件夹,点OK建立新程序。
4.在Source\Exercise1子文件中,你会看到一个叫做Model.xaml的文件,它包含了你将要使用的3D模型。用记事本打开这个文件,你会看到很多代码,这些代码靠手工输入无疑是困难并且枯燥的。而生成这个模型文件的工具就大大简化了工作,并且自动的将代码封装在Viewport3D里并放入Viewbox中。你可以将整个文件放入XamlPad中来预览模型。
5.将Model.xaml中的所有内容贴到应用程序中window.xaml文件里的Grid标签中。
6.按F5编译程序,运行结果如下:
任务2 改变摄像机的位置。
在本任务中,我们将了解如何改变摄像机的位置。
1. 打开Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 标签,它包括了一个PerspectiveCamera,即透视摄像机。它的UpDirection 目前是0,1,0,把它改为0.2,1,0,然后按F5运行程序,看看效果的变化。
2. 改变摄像机的Position为0.25,0,2.2339, 然后运行程序,观察摄像机位置发生的变化。
3. 改变Position为3,0,2.2339,同时也改变LookDirection为-3,0,-2.2,然后再运行程序观察变化。
4. 好,现在请随便尝试几个数据组合,请注意如果尝试过大的数据,很容易使摄像机跑到一个较远的地方,因此会什么都看不到。
5. 当你完成实验后,用一下代码使其回到初始的默认位置,以进行后面的任务。
任务3 给模型添加动画。
1.打开Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 标签,在此标签后,添加下面的代码:
2.运行程序,logo模型会自动的发生反复旋转。
任务4 可交互的旋转模型。
在本练习的最后一个任务中,我们将允许使用鼠标旋转模型。你会用到 3D Tools for the Windows Presentation Foundation, 这是一套可以辅助我们在WPF中使用XAML制作3D应用的工具,可以从http://www.codeplex.com/3DTools上下载。当然,我们现在已经不必去下载了,我们要用到的3DTools.dll 库文件在实例的Source\Exercise1文件夹下。
1.给项目中添加3DTools.dll库文件。(在Project面板中,右击References, 选Add Reference…, 然后找到3DTools.dll文件)
2.打开Window1.xaml文件,添加一个XML 命名空间声明,以在这个XAML文件中使用3D tools:
3.添加<tools:TrackballDecorator>标签,使<Viewport3D></Viewport3D>标签整体包含在添入的标签<tools:TrackballDecorator>... </tools:TrackballDecorator>中。
TrackballDecorator允许使用鼠标左键拖动旋转包含的模型,使用鼠标右键缩小放大。
4.编译运行程序,现在就实现与模型的旋转、缩小放大交互了。
本练习完
原译文:http://www.wangpangzi.net/article.asp?id=87
源文件下载 http://www.wangpangzi.net/uploads/200703/3dlab.zip
本文的目的是在Blend环境中研究Windows Presentation Foundation(WPF)的3D特性,首先我们导入一个已经建立好的3D模型到程序中,使用动画让其旋转。然后,我们会研究如何动态的使用代码生成模型。最后我们会把2D的用户界面映射到3D模型上,用户并可以与其交互。
注意,源文件中的源代码是为每个阶段而设计的,因此你可以从中间开始学习或者做阶段备份之用。每个练习也包含了一份完整的完成后源代码,你可以直接通过它们查看最终结果。
练习一 使用静态3D模型(共4个任务)
在本练习中,你将会导入一个已经建立好的3D模型,并使用Viewport3D对象把它显示出来,然后使用动画让他旋转起来。最后,用户可以使用鼠标旋转这个模型。
任务1 导入3D模型。
虽然我们可以使用XAML直接建立3D模型了,但对于稍微复杂的模型来说,我们最好使用专业工具建立模型,再导出成XAML格式供我们使用。在本练习中,我们将会使用一个用这种方式建立的3D模型,即一个XAML文件。并将其导入Blend中。
1.打开Microsoft Expression Blend.
2.运行File > New Project…建立新程序。
3.在弹出的New Project 窗口中选择Standard Application,在Name中输入Show3DModel, 选择你的保存文件夹,点OK建立新程序。
4.在Source\Exercise1子文件中,你会看到一个叫做Model.xaml的文件,它包含了你将要使用的3D模型。用记事本打开这个文件,你会看到很多代码,这些代码靠手工输入无疑是困难并且枯燥的。而生成这个模型文件的工具就大大简化了工作,并且自动的将代码封装在Viewport3D里并放入Viewbox中。你可以将整个文件放入XamlPad中来预览模型。
5.将Model.xaml中的所有内容贴到应用程序中window.xaml文件里的Grid标签中。
6.按F5编译程序,运行结果如下:
任务2 改变摄像机的位置。
在本任务中,我们将了解如何改变摄像机的位置。
1. 打开Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 标签,它包括了一个PerspectiveCamera,即透视摄像机。它的UpDirection 目前是0,1,0,把它改为0.2,1,0,然后按F5运行程序,看看效果的变化。
2. 改变摄像机的Position为0.25,0,2.2339, 然后运行程序,观察摄像机位置发生的变化。
3. 改变Position为3,0,2.2339,同时也改变LookDirection为-3,0,-2.2,然后再运行程序观察变化。
4. 好,现在请随便尝试几个数据组合,请注意如果尝试过大的数据,很容易使摄像机跑到一个较远的地方,因此会什么都看不到。
5. 当你完成实验后,用一下代码使其回到初始的默认位置,以进行后面的任务。
<PerspectiveCamera x:Name="FrontOR9" FarPlaneDistance="10" LookDirection="0,0,-1"
UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,2.29339"
FieldOfView="39.5978" />
UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,2.29339"
FieldOfView="39.5978" />
任务3 给模型添加动画。
1.打开Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 标签,在此标签后,添加下面的代码:
<Viewport3D.Triggers>
<EventTrigger RoutedEvent="Viewport3D.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Rotation3DAnimation Storyboard.TargetName="WpfLogoOR12"
Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)"
Duration="0:0:5" AutoReverse="True"
RepeatBehavior="Forever" AccelerationRatio="0.4" DecelerationRatio="0.4">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="2,10,3" Angle="-45" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="2,10,3" Angle="45" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Viewport3D.Triggers>
这段代码使用了Rotation3DAnimation标签给模型添加动画,Storyboard.TargetName和Storyboard.TargetProperty属性指示了模型发生动画的具体部分。(WpfLogoOR12是模型中的一个标签,代表logo模型整体)<EventTrigger RoutedEvent="Viewport3D.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<Rotation3DAnimation Storyboard.TargetName="WpfLogoOR12"
Storyboard.TargetProperty="(Model3DGroup.Transform).(Transform3DGroup.Children)[2].(RotateTransform3D.Rotation)"
Duration="0:0:5" AutoReverse="True"
RepeatBehavior="Forever" AccelerationRatio="0.4" DecelerationRatio="0.4">
<Rotation3DAnimation.From>
<AxisAngleRotation3D Axis="2,10,3" Angle="-45" />
</Rotation3DAnimation.From>
<Rotation3DAnimation.To>
<AxisAngleRotation3D Axis="2,10,3" Angle="45" />
</Rotation3DAnimation.To>
</Rotation3DAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Viewport3D.Triggers>
2.运行程序,logo模型会自动的发生反复旋转。
任务4 可交互的旋转模型。
在本练习的最后一个任务中,我们将允许使用鼠标旋转模型。你会用到 3D Tools for the Windows Presentation Foundation, 这是一套可以辅助我们在WPF中使用XAML制作3D应用的工具,可以从http://www.codeplex.com/3DTools上下载。当然,我们现在已经不必去下载了,我们要用到的3DTools.dll 库文件在实例的Source\Exercise1文件夹下。
1.给项目中添加3DTools.dll库文件。(在Project面板中,右击References, 选Add Reference…, 然后找到3DTools.dll文件)
2.打开Window1.xaml文件,添加一个XML 命名空间声明,以在这个XAML文件中使用3D tools:
<Window x:Class="Show3DModel.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tools="clr-namespace:_3DTools;assembly=3DTools"
Title="Show3DModel" Height="300" Width="300"
>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:tools="clr-namespace:_3DTools;assembly=3DTools"
Title="Show3DModel" Height="300" Width="300"
>
3.添加<tools:TrackballDecorator>标签,使<Viewport3D></Viewport3D>标签整体包含在添入的标签<tools:TrackballDecorator>... </tools:TrackballDecorator>中。
TrackballDecorator允许使用鼠标左键拖动旋转包含的模型,使用鼠标右键缩小放大。
4.编译运行程序,现在就实现与模型的旋转、缩小放大交互了。
本练习完
原译文:http://www.wangpangzi.net/article.asp?id=87
欢迎大家扫描下面二维码成为我的客户,扶你上云