3D 概觀

本頁僅適用 WPF 專案

Microsoft Expression Blend 提供有用的工具,能讓您建立、修改 3D 物件並為其製作動畫效果。

Expression Blend 也可以匯入 .obj 檔案格式的 3D 內容。為了要正確呈現這些檔案,您還必須匯入材質檔案 (. .mtl 檔案),此檔中定義了 3D 物件上使用的材質,以及匯入所有材質檔案中會用到的影像檔案。

3D 內容包含在 [Viewport3D] 控制項內。此檢視區會作為 3D 內容的包裝函式或容器。您可以在 [屬性] 面板中修改材質、光線及觀景窗,為 3D 內容製作出想要的效果及視覺屬性。

Cc295225.eba8e7a7-0039-4fe7-a01f-d20734750a82(zh-tw,Expression.10).png

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-tw,Expression.10).png

Viewport3D

二維元素 (控制項),例如橢圓形,作為轉譯文件中 3D 內容的容器。

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-tw,Expression.10).png

觀景窗

呈現文件中的檢視區,作用與視訊攝影機十分類似。觀景窗是用於取得 3D 內容,並將該內容轉換為 2D 影像 (一般平面化物件) 以顯示在螢幕上。觀景窗共有兩種類型:[透視] 及 [正視]。

Cc295225.f0c1ff71-7814-42ba-806b-7ea92d616e69(zh-tw,Expression.10).png

材質

3D 內容材質呈現的是實際 3D 物件本身的色彩、紋理及一般外觀。雖然光線會影響物件的視覺外觀,但是材質會實際直接影響 3D 物件的表面。材質共有三種類型:[擴散]、[放射] 及 [反射]。

Cc295225.eb6fad93-f17e-4f62-a926-8c8651862891(zh-tw,Expression.10).png

光線

如您預期,光線可以增加 3D 內容的照明。如果沒有光線,您就看不到 3D 內容,這和嘗試在完全沒有光線的情況下觀看東西十分類似。光線共有四種類型:[環境]、[聚光]、[定向] 及 [點]。

3D 模型

您有幾種方式可以使用控點來變更方向和 3D 物件的位置。例如,藉由使用 [選取] Cc295225.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.10).png 工具,您可以按兩下 3D 物件加以選取,然後當滑鼠顯示重新配置指標 Cc295225.eff911a7-b891-4315-a86c-cc4cd088e647(zh-tw,Expression.10).png 時,在畫板中拖曳該物件。如果進行這樣的嘗試,則在拖曳 3D 物件時,3D 物件並不會放大或縮小。如果按下 ALT 鍵並上下拖曳滑鼠,就可以放大及縮小 3D 物件。

您也可以在 [屬性] 面板的 [轉換] 下旋轉、調整位置及縮放 3D 物件,這與處理任何物件的方式皆相同。

Cc295225.alert_tip(zh-tw,Expression.10).gif秘訣:

縮放及調整大小都可以變更物件的大小,但兩種方式完全不同。縮放會根據起始大小的百分比來變更物件大小及物件的所有屬性;例如,會縮放已加上筆觸物件的筆觸,而且不會再對應至特定的筆觸寬度。調整大小表示您變更了物件的 [Height] 及 [Width] 屬性 (維度)。

3D 中的轉換控點各不相同。因此,最好能瞭解使用各個控點的最佳方式,如下所示:

顯示所有控點的 3D 物件

Cc295225.0aa7c80e-8ae9-492f-808b-91661c79b0ef(zh-tw,Expression.10).png

描述

控點

X 軸

您可以按一下並拖曳 X 旋轉控點 Cc295225.188962b3-2c72-4ef1-968a-cc7293731734(zh-tw,Expression.10).png (紅色弧線),以 X 軸 (紅色控點) 為基準旋轉物件。此旋轉控點可以讓您以 X 軸為基準旋轉物件,位置控點 Cc295225.31416d04-8419-46e4-9e7f-40ba237ba11e(zh-tw,Expression.10).png (紅色箭號) 可以讓您沿著 X 軸移動物件,而縮放控點 Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(zh-tw,Expression.10).png (紅色方塊) 可以讓您沿著 X 軸縮放物件。

Cc295225.05557e99-7e25-4fe9-b654-46d5fc6aad11(zh-tw,Expression.10).png

x 軸控點

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-tw,Expression.10).png

旋轉

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-tw,Expression.10).png

位置

Y 軸

您可以按一下並拖曳 Y 旋轉控點 Cc295225.215fc14e-368f-4a1f-8c64-1e12229321e8(zh-tw,Expression.10).png (綠色弧線),以 Y 軸 (綠色控點) 為基準旋轉物件。此旋轉控點可以讓您以 Y 軸為基準旋轉物件,位置控點 Cc295225.39165395-57a3-49e2-adf7-5de41da5656c(zh-tw,Expression.10).png (綠色箭號) 可以讓您沿著 Y 軸移動物件,而縮放控點 Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(zh-tw,Expression.10).png (綠色方塊) 則可讓您沿著 Y 軸縮放物件。

Cc295225.1fd95e6e-9274-462d-83e9-cc0a472b140b(zh-tw,Expression.10).png

Y 軸控點

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-tw,Expression.10).png

旋轉

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-tw,Expression.10).png

位置

Z 軸

您也可以按一下並拖曳 Z 旋轉控點 Cc295225.a666c7c7-1ed8-4733-bc82-d12b3bd1c58c(zh-tw,Expression.10).png (藍色弧線),以 Z 軸 (藍色控點) 為基準旋轉物件。此旋轉控點可以讓您以 Z 軸為基準旋轉物件,位置控點 Cc295225.54265b96-4329-4435-942d-e5ed6e61e0da(zh-tw,Expression.10).png (藍色箭號) 可以讓您沿著 Z 軸移動物件,而縮放控點 Cc295225.ae0eb9fb-170a-44f8-a9ef-cf7e2b7313cc(zh-tw,Expression.10).png (藍色方塊) 則可讓您沿著 Z 軸縮放物件。

Cc295225.19369f35-ddcf-4d84-b365-a36559a116b8(zh-tw,Expression.10).png

Z 軸控點

Cc295225.25182a96-9a69-478a-9cfe-5b360e6a9bea(zh-tw,Expression.10).png

旋轉

Cc295225.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(zh-tw,Expression.10).png

位置

Cc295225.alert_note(zh-tw,Expression.10).gif注意事項:

旋轉時,按住 SHIFT 鍵即可每隔 15 度貼齊旋轉。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

材質

3D 內容材質呈現的是實際 3D 物件本身的色彩、紋理及一般外觀。雖然光線會影響物件的視覺外觀,但是材質會直接影響 3D 物件的表面。有三種不同的材質類型可供選取,您可以對 3D 內容做出不同的修改,如下所示:

  • [擴散材質] Cc295225.f4276d84-0e9b-439e-a6f1-dc2db7128d0f(zh-tw,Expression.10).png 會決定套用平行光 (白光) 的 3D 物件的色彩,套用平行光的效果和牆上的油漆極為相近。

  • [放射材質] Cc295225.49e7cf0c-4177-496a-9732-59526b554c52(zh-tw,Expression.10).png 會讓物件顯示發光效果。光線的色彩是由材質的色彩所決定。

  • [反射材質] Cc295225.de37968c-c6c7-43b8-9ada-8ca0c9998b5c(zh-tw,Expression.10).png 可控制 3D 物件反射亮部的色彩。反射亮部就是您在光滑表面 (例如鉻液態金屬) 上看到的亮點。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

觀景窗

3D 內容的觀景窗呈現的是觀點,作用與視訊攝影機十分類似。觀景窗是用於將 3D 內容轉換為 2D 影像 (一般平面化物件) 以顯示在螢幕上。每個 [Viewport3D] 的觀景窗就是該檢視區的屬性。如果在 [互動] 面板的 [物件與時間軸] 下的物件檢視中選取觀景窗,則可以使用 [觀景窗] 下的 [屬性] 面板來修改它的屬性。每個檢視區都只有一個與其關聯的觀景窗屬性,但是您可以在透視觀景窗與正視觀景窗這兩種觀景窗類型之間切換,以變更物件出現在您應用程式中的方式:

  • 透視觀景窗的作用與一般攝影機的鏡頭類似。當物件遠離觀景窗時,物件看起來會比較小。在 [屬性] 面板的 [觀景窗] 之下,按一下 [透視觀景窗] Cc295225.3cacfb92-e2f5-4f68-a478-e79ff491201d(zh-tw,Expression.10).png,即可切換至此觀景窗。

  • 正視觀景窗會關閉一般觀景窗的透視。從正視觀景窗將物件移遠時,物件並不會變小或扭曲。在 [屬性] 面板的 [觀景窗] 之下,按一下 [正視觀景窗] Cc295225.035d804b-9193-4c84-aca2-308c24e87563(zh-tw,Expression.10).png,即可切換至此觀景窗。

透視觀景窗

Cc295225.6122adef-3582-4de3-8868-fb21a23bf0ce(zh-tw,Expression.10).png

正視觀景窗

Cc295225.ffa3ca6d-a4b1-4900-b501-decc2c1747d8(zh-tw,Expression.10).png

您可以透過使用 [觀景窗軌跡] Cc295225.0f80cb0b-7405-4759-9e97-fcde9a53cbb5(zh-tw,Expression.10).png 工具,移動觀景窗。您也可以在 [屬性] 面板的 [觀景窗] 之下,移動觀景窗以及對每種觀景窗類型做出其他變更。

  • 透視視野範圍   僅適用於透視觀景窗,此屬性會變更可以透過觀景窗看到的內容量,以及文件中物件為觀景窗所扭曲的程度。較小的值會減少物件為透視所扭曲的程度,而較大的值則會讓物件變得相當扭曲,與魚眼鏡頭所造成的效果相同。

  • 寬度   僅適用於正視觀景窗,此屬性控制可見內容的數量。隨著此數字增加,看到的內容就愈多。

  • 位置   3 D 虛擬空間中的觀景窗位置。

  • 方向   3 D 虛擬空間中觀景窗所查看的點。

  • 上向量   朝此觀景窗「向上」的方向移動。

  • 遠離/靠近裁剪平面   這些選項可控制物件在所呈現檢視中可見的範圍內,與觀景窗之間的遠近程度。

如需有關如何修改觀景窗的詳細資訊,請參閱移動觀景窗

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

光線

如您預期,光線可以增加 3D 內容的亮度。如果沒有光線,您就看不到大部分的 3D 內容,因為其外觀和嘗試在完全沒有光線的情況下觀看東西十分類似。光線是 [Viewport3D] 控制項的屬性,只要在 [互動] 面板的 [物件與時間軸] 下的物件檢視中選取光線,就可以修改光線設定。

您可以透過使用在您選取光線 (在後續的<光線類型>一節中,下列影像的紅色、綠色以及藍色控點) 時出現的轉換控點,來轉換光線。如需有關如何移動光線的詳細資訊,請參閱移動光線方向

此外,您可以變更光線的數個屬性,但是您想要變更的兩個主要屬性是色彩和類型。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

光線色彩

變更光線的色彩就與變更 2D 物件的色彩一樣簡單。您只要選取 [Viewport3D] 內的 Light 物件,就可以變更光線色彩。接著,您就可以使用 [屬性] 面板之 [光線] 下的色彩編輯器,變更光線。如需範例,請參閱變更光線色彩

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

光線類型

下表描述您可以套用至 3D 物件的光線類型。您只要選取 [Viewport3D] 內的 Light 物件,就可以變更光線類型。接著,您可在 [屬性] 面板的 [光線] 中選取不同的光線類型。如需範例,請參閱變更光線類型

光線類型及描述

處理畫板上的光線

環境光線 Cc295225.33fe619a-83c5-4222-b630-d0a9a5e8bae4(zh-tw,Expression.10).png

Cc295225.alert_tip(zh-tw,Expression.10).gif秘訣:
如果僅使用環境光線,則物件外觀會呈現褪色的情況,且光線看來會只有單一色彩濃淡效果。若要有最佳效果,也請使用其他非環境光線。

環境光線會將光線投射成來自所有方向的型態。當您想要讓亮度平均分散到所有物件時,請使用此選項。

Cc295225.a6d6e8c5-0307-45a6-aff0-c3972353e92b(zh-tw,Expression.10).png

聚光光線 Cc295225.24318e46-617e-47c3-b48e-f65646451411(zh-tw,Expression.10).png

聚光光線投射光線的方式就像實際投射燈一樣。光線會自投射中心位置以圓錐狀型態擴散。3D 物件中落在圓錐狀光線投射範圍外的部分,不會受聚光光線影響。

Cc295225.66eb0a06-7bfc-4c9e-976e-f2be9cc4446d(zh-tw,Expression.10).png

定向光線 Cc295225.81621350-905c-445d-a2e2-dea51ec347cd(zh-tw,Expression.10).png

定向光線會以特定方向平均投射光線,這與日光十分相似。

Cc295225.5af771b3-e0bd-4798-988f-f8e5ed3df458(zh-tw,Expression.10).png

點光線 Cc295225.665e0a3e-928b-408b-a01f-cb2d57ac2bbf(zh-tw,Expression.10).png

點光線投射光線的方式是從單點往所有方向投射,這與標準燈泡十分相似。

Cc295225.261f55a3-4604-4474-915f-c88665bf8aab(zh-tw,Expression.10).png
Cc295225.alert_tip(zh-tw,Expression.10).gif秘訣:

若要同時查看作用於物件上的所有光線,請指向 [檢視] 功能表上的 [3D],然後按一下 [切換光線]。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

其他光線屬性

您可以藉由修改下列屬性,對 [屬性] 面板之 [光線] 下的每種光線類型進行其他的變更:

  • [衰減]   控制光能在被照亮物件距離光線漸遠時的減弱方式。您可修改下列減弱屬性:

    • ConstantAttenuation   被照亮的物件遠離光線時,不會變更光能。

    • LinearAttenuation   被照亮的物件距離光線漸遠時,光能會以等速減弱。

    • QuadraticAttenuation   被照亮的物件距離光線漸遠時,光能會先快速減弱,然後繼續慢慢減弱。

    Cc295225.alert_note(zh-tw,Expression.10).gif注意事項:

    [衰減] 屬性只適用於 [聚光光線] 與 [點光線] 光線類型。

  • 方向   光線所往的方向。[方向] 屬性只適用於 [聚光光線] 與 [定向光線] 光線類型。

  • 圓錐體角度   此一角度會決定選取的光線自投射中心位置圓錐狀擴散的寬度。如果用閃光燈照射地面,閃光燈並不會平均照射地面,而是愈遠離中心點,光線就愈暗。[圓錐體角度] 可讓您控制此類光線減弱的速度。您可修改下列圓錐體角度屬性:

    • InnerConeAngle   光線中間最亮的角度。

    • OuterConeAngle   光線外部較暗的角度。如果要建立強光,內部與外部圓錐體角度必須相同。如果內部圓錐體角度大於外部圓錐體角度,此值將會視為和外部圓錐體角度相同。

    Cc295225.alert_note(zh-tw,Expression.10).gif注意事項:

    [圓錐體角度] 屬性只適用於 [聚光光線] 光線類型。

  • 位置   光線在其所在群組中的位置。這三個值就是光線的 X、Y 及 Z 位置。[位置] 屬性只適用於 [聚光光線] 與 [點光線] 光線類型。

  • 範圍   光線的範圍。落在該範圍內的物件會由該光線所照亮,而不在光線範圍內的物件則不會由該光線所照亮。[範圍] 屬性只適用於 [聚光光線] 與 [點光線] 光線類型。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首

支援新的 3D 物件

. NET Framework 3.5 引進下列的新 3D 物件:

  • UIElement3D (XAML 中不支援)

  • ContainerUIElement3D

  • ModelUIElement3D

  • Viewport2DVisual3D

Expression Blend 2 不包含 [資產庫] 中的新 3D 物件。但您仍可使用這些物件,方式是手動在 XAML 中進行修改,或使用 Microsoft Visual Studio 2008 新增這些物件,然後在 Expression Blend 2 中開啟您的專案。Expression Blend 2 可辨識新的 3D 物件,而您可以使用 3D 提示在場景中調整這些物件。您可以在 MSDN 文件庫 上,找到新物件的程式碼範例。

Cc295225.7e183f1f-37d8-4dcb-980c-19a5d61ca087(zh-tw,Expression.10).gif回到頁首