在Expression Blend中使用XAML建立3D應(yīng)用程序(1)
Posted on 2007-08-29 15:36 ricki 閱讀(802) 評(píng)論(0) 編輯 收藏 所屬分類: Microsoft Expression Blend&Silverlight參考微軟<Creating 3D Content with WPF>文檔翻譯。
源文件下載 http://www.wangpangzi.net/uploads/200703/3dlab.zip
本文的目的是在Blend環(huán)境中研究Windows Presentation Foundation(WPF)的3D特性,首先我們導(dǎo)入一個(gè)已經(jīng)建立好的3D模型到程序中,使用動(dòng)畫讓其旋轉(zhuǎn)。然后,我們會(huì)研究如何動(dòng)態(tài)的使用代碼生成模型。最后我們會(huì)把2D的用戶界面映射到3D模型上,用戶并可以與其交互。
注意,源文件中的源代碼是為每個(gè)階段而設(shè)計(jì)的,因此你可以從中間開始學(xué)習(xí)或者做階段備份之用。每個(gè)練習(xí)也包含了一份完整的完成后源代碼,你可以直接通過它們查看最終結(jié)果。
練習(xí)一 使用靜態(tài)3D模型(共4個(gè)任務(wù))
在本練習(xí)中,你將會(huì)導(dǎo)入一個(gè)已經(jīng)建立好的3D模型,并使用Viewport3D對(duì)象把它顯示出來,然后使用動(dòng)畫讓他旋轉(zhuǎn)起來。最后,用戶可以使用鼠標(biāo)旋轉(zhuǎn)這個(gè)模型。
任務(wù)1 導(dǎo)入3D模型。
雖然我們可以使用XAML直接建立3D模型了,但對(duì)于稍微復(fù)雜的模型來說,我們最好使用專業(yè)工具建立模型,再導(dǎo)出成XAML格式供我們使用。在本練習(xí)中,我們將會(huì)使用一個(gè)用這種方式建立的3D模型,即一個(gè)XAML文件。并將其導(dǎo)入Blend中。
1.打開Microsoft Expression Blend.
2.運(yùn)行File > New Project…建立新程序。
3.在彈出的New Project 窗口中選擇Standard Application,在Name中輸入Show3DModel, 選擇你的保存文件夾,點(diǎn)OK建立新程序。
4.在Source\Exercise1子文件中,你會(huì)看到一個(gè)叫做Model.xaml的文件,它包含了你將要使用的3D模型。用記事本打開這個(gè)文件,你會(huì)看到很多代碼,這些代碼靠手工輸入無疑是困難并且枯燥的。而生成這個(gè)模型文件的工具就大大簡(jiǎn)化了工作,并且自動(dòng)的將代碼封裝在Viewport3D里并放入Viewbox中。你可以將整個(gè)文件放入XamlPad中來預(yù)覽模型。
5.將Model.xaml中的所有內(nèi)容貼到應(yīng)用程序中window.xaml文件里的Grid標(biāo)簽中。
6.按F5編譯程序,運(yùn)行結(jié)果如下:
任務(wù)2 改變攝像機(jī)的位置。
在本任務(wù)中,我們將了解如何改變攝像機(jī)的位置。
1. 打開Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 標(biāo)簽,它包括了一個(gè)PerspectiveCamera,即透視攝像機(jī)。它的UpDirection 目前是0,1,0,把它改為0.2,1,0,然后按F5運(yùn)行程序,看看效果的變化。
2. 改變攝像機(jī)的Position為0.25,0,2.2339, 然后運(yùn)行程序,觀察攝像機(jī)位置發(fā)生的變化。
3. 改變Position為3,0,2.2339,同時(shí)也改變LookDirection為-3,0,-2.2,然后再運(yùn)行程序觀察變化。
4. 好,現(xiàn)在請(qǐng)隨便嘗試幾個(gè)數(shù)據(jù)組合,請(qǐng)注意如果嘗試過大的數(shù)據(jù),很容易使攝像機(jī)跑到一個(gè)較遠(yuǎn)的地方,因此會(huì)什么都看不到。
5. 當(dāng)你完成實(shí)驗(yàn)后,用一下代碼使其回到初始的默認(rèn)位置,以進(jìn)行后面的任務(wù)。
任務(wù)3 給模型添加動(dòng)畫。
1.打開Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 標(biāo)簽,在此標(biāo)簽后,添加下面的代碼:
2.運(yùn)行程序,logo模型會(huì)自動(dòng)的發(fā)生反復(fù)旋轉(zhuǎn)。
任務(wù)4 可交互的旋轉(zhuǎn)模型。
在本練習(xí)的最后一個(gè)任務(wù)中,我們將允許使用鼠標(biāo)旋轉(zhuǎn)模型。你會(huì)用到 3D Tools for the Windows Presentation Foundation, 這是一套可以輔助我們?cè)赪PF中使用XAML制作3D應(yīng)用的工具,可以從http://www.codeplex.com/3DTools上下載。當(dāng)然,我們現(xiàn)在已經(jīng)不必去下載了,我們要用到的3DTools.dll 庫文件在實(shí)例的Source\Exercise1文件夾下。
1.給項(xiàng)目中添加3DTools.dll庫文件。(在Project面板中,右擊References, 選Add Reference…, 然后找到3DTools.dll文件)
2.打開Window1.xaml文件,添加一個(gè)XML 命名空間聲明,以在這個(gè)XAML文件中使用3D tools:
3.添加<tools:TrackballDecorator>標(biāo)簽,使<Viewport3D></Viewport3D>標(biāo)簽整體包含在添入的標(biāo)簽<tools:TrackballDecorator>... </tools:TrackballDecorator>中。
TrackballDecorator允許使用鼠標(biāo)左鍵拖動(dòng)旋轉(zhuǎn)包含的模型,使用鼠標(biāo)右鍵縮小放大。
4.編譯運(yùn)行程序,現(xiàn)在就實(shí)現(xiàn)與模型的旋轉(zhuǎn)、縮小放大交互了。
源文件下載 http://www.wangpangzi.net/uploads/200703/3dlab.zip
本文的目的是在Blend環(huán)境中研究Windows Presentation Foundation(WPF)的3D特性,首先我們導(dǎo)入一個(gè)已經(jīng)建立好的3D模型到程序中,使用動(dòng)畫讓其旋轉(zhuǎn)。然后,我們會(huì)研究如何動(dòng)態(tài)的使用代碼生成模型。最后我們會(huì)把2D的用戶界面映射到3D模型上,用戶并可以與其交互。
注意,源文件中的源代碼是為每個(gè)階段而設(shè)計(jì)的,因此你可以從中間開始學(xué)習(xí)或者做階段備份之用。每個(gè)練習(xí)也包含了一份完整的完成后源代碼,你可以直接通過它們查看最終結(jié)果。
練習(xí)一 使用靜態(tài)3D模型(共4個(gè)任務(wù))
在本練習(xí)中,你將會(huì)導(dǎo)入一個(gè)已經(jīng)建立好的3D模型,并使用Viewport3D對(duì)象把它顯示出來,然后使用動(dòng)畫讓他旋轉(zhuǎn)起來。最后,用戶可以使用鼠標(biāo)旋轉(zhuǎn)這個(gè)模型。
任務(wù)1 導(dǎo)入3D模型。
雖然我們可以使用XAML直接建立3D模型了,但對(duì)于稍微復(fù)雜的模型來說,我們最好使用專業(yè)工具建立模型,再導(dǎo)出成XAML格式供我們使用。在本練習(xí)中,我們將會(huì)使用一個(gè)用這種方式建立的3D模型,即一個(gè)XAML文件。并將其導(dǎo)入Blend中。
1.打開Microsoft Expression Blend.
2.運(yùn)行File > New Project…建立新程序。
3.在彈出的New Project 窗口中選擇Standard Application,在Name中輸入Show3DModel, 選擇你的保存文件夾,點(diǎn)OK建立新程序。
4.在Source\Exercise1子文件中,你會(huì)看到一個(gè)叫做Model.xaml的文件,它包含了你將要使用的3D模型。用記事本打開這個(gè)文件,你會(huì)看到很多代碼,這些代碼靠手工輸入無疑是困難并且枯燥的。而生成這個(gè)模型文件的工具就大大簡(jiǎn)化了工作,并且自動(dòng)的將代碼封裝在Viewport3D里并放入Viewbox中。你可以將整個(gè)文件放入XamlPad中來預(yù)覽模型。
5.將Model.xaml中的所有內(nèi)容貼到應(yīng)用程序中window.xaml文件里的Grid標(biāo)簽中。
6.按F5編譯程序,運(yùn)行結(jié)果如下:
任務(wù)2 改變攝像機(jī)的位置。
在本任務(wù)中,我們將了解如何改變攝像機(jī)的位置。
1. 打開Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 標(biāo)簽,它包括了一個(gè)PerspectiveCamera,即透視攝像機(jī)。它的UpDirection 目前是0,1,0,把它改為0.2,1,0,然后按F5運(yùn)行程序,看看效果的變化。
2. 改變攝像機(jī)的Position為0.25,0,2.2339, 然后運(yùn)行程序,觀察攝像機(jī)位置發(fā)生的變化。
3. 改變Position為3,0,2.2339,同時(shí)也改變LookDirection為-3,0,-2.2,然后再運(yùn)行程序觀察變化。
4. 好,現(xiàn)在請(qǐng)隨便嘗試幾個(gè)數(shù)據(jù)組合,請(qǐng)注意如果嘗試過大的數(shù)據(jù),很容易使攝像機(jī)跑到一個(gè)較遠(yuǎn)的地方,因此會(huì)什么都看不到。
5. 當(dāng)你完成實(shí)驗(yàn)后,用一下代碼使其回到初始的默認(rèn)位置,以進(jìn)行后面的任務(wù)。
<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" />
任務(wù)3 給模型添加動(dòng)畫。
1.打開Window1.xaml文件,找到Viewport3D中的Viewport3D.Camera 標(biāo)簽,在此標(biāo)簽后,添加下面的代碼:
<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標(biāo)簽給模型添加動(dòng)畫,Storyboard.TargetName和Storyboard.TargetProperty屬性指示了模型發(fā)生動(dòng)畫的具體部分。(WpfLogoOR12是模型中的一個(gè)標(biāo)簽,代表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.運(yùn)行程序,logo模型會(huì)自動(dòng)的發(fā)生反復(fù)旋轉(zhuǎn)。
任務(wù)4 可交互的旋轉(zhuǎn)模型。
在本練習(xí)的最后一個(gè)任務(wù)中,我們將允許使用鼠標(biāo)旋轉(zhuǎn)模型。你會(huì)用到 3D Tools for the Windows Presentation Foundation, 這是一套可以輔助我們?cè)赪PF中使用XAML制作3D應(yīng)用的工具,可以從http://www.codeplex.com/3DTools上下載。當(dāng)然,我們現(xiàn)在已經(jīng)不必去下載了,我們要用到的3DTools.dll 庫文件在實(shí)例的Source\Exercise1文件夾下。
1.給項(xiàng)目中添加3DTools.dll庫文件。(在Project面板中,右擊References, 選Add Reference…, 然后找到3DTools.dll文件)
2.打開Window1.xaml文件,添加一個(gè)XML 命名空間聲明,以在這個(gè)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>標(biāo)簽,使<Viewport3D></Viewport3D>標(biāo)簽整體包含在添入的標(biāo)簽<tools:TrackballDecorator>... </tools:TrackballDecorator>中。
TrackballDecorator允許使用鼠標(biāo)左鍵拖動(dòng)旋轉(zhuǎn)包含的模型,使用鼠標(biāo)右鍵縮小放大。
4.編譯運(yùn)行程序,現(xiàn)在就實(shí)現(xiàn)與模型的旋轉(zhuǎn)、縮小放大交互了。