[教程]在Expression Blend中使用XAML建立3D應用程式

[ 2007-03-31 01:08:31]

參考微軟<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．  當你完成實驗後，用一下代碼使其回到初始的預設位置，以進行後面的任務。

<PerspectiveCamera x:Name="FrontOR9" FarPlaneDistance="10" LookDirection="0,0,-1"
   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模型 整體)
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"
 >

3． 添加<tools:TrackballDecorator>標籤，使<Viewport3D>< /Viewport3D>標籤整體包含在添入的標籤<tools:TrackballDecorator>... </tools:TrackballDecorator>中。
TrackballDecorator允許使用滑鼠左鍵拖動旋轉包含的模型，使用滑鼠右鍵縮小放大。
4．編譯運行程式，現在就實現與模型的旋轉、縮小放大互動了。

本練習完

原文：http://www.wangpangzi.net/article.asp?id=87：
作者blog很不錯，建議大家去看看：http://www.wangpangzi.net/