Blender 3D:菜鳥到專業/為網頁製作 3D 平鋪背景
本教程將指導您完成製作 3D 平鋪背景的過程,這些背景可用於網頁、桌面或其他任何用途。我們將使用 Blender 和一個圖形編輯程式,如 Adobe Photoshop 或 GIMP。我將提供詳細的解釋,以迎合初學者,但經驗豐富的 Blender 使用者可能只需要按照提供的圖片進行操作。如果您不是英語母語,或者您不喜歡閱讀說明,您可能也會發現這些圖片很有用。
啟動 Blender 並檢視您孤獨的立方體。為了演示,我們將使用這個立方體作為起點,但您可以隨意使用任何形狀。按下“Tab”鍵進入編輯模式。按下鍵盤上的“E”鍵,擠出選單將出現。選擇“單個面”。當您拖動滑鼠游標時,您會看到視窗左下角的一些數字移動,以及顯示“收縮/膨脹”的文字。我建議將其設定為 1.0000 以保持簡單。在拖動時按住“Ctrl”鍵以以設定的增量進行操作。
接下來,在六個立方體面仍然被選中的情況下,按下“S”鍵以縮放這些面。我建議縮放到 0.8000。
很好。現在我們已經建立了物體,我們將準備對其進行平鋪。
“Tab”回到物體模式,並按下“NumPad 7”轉到頂檢視,或手動單擊視窗底部的“檢視”,然後選擇“頂部”。
按下“空格鍵”,從出現的選單中選擇“新增”> “網格”> “平面”。平面出現了,但被我們的立方體物體遮擋,因此按下“S”將平面縮放到 5.0000。
您會注意到我已經將我的平面塗成黑色。這只是為了讓您更容易看到。您無需為此煩惱,因為我們很快就會刪除這個平面的面。
現在我們有一個易於看到的邊界,代表了將要平鋪的區域。如果我們決定在任何時候不再需要或想要這個邊界,我們可以透過按下“M”並選擇一個圖層來將其移動到另一個圖層。
現在有趣的開始了。如果您以前建立過 2D 平鋪背景,這個概念您會很熟悉。
在物體模式下,選擇您的立方體物體。此時,您有兩個選擇。一是製作立方體物體的副本。另一個是製作立方體物體的連結副本。我建議製作連結副本,因為您可以在以後編輯一個物體的網格以更改所有複製物體的網格。如果您以後計劃動畫您的平鋪背景,這將特別有用(注意不要分散前臺的注意力)。如果您想輕鬆地嘗試新設計,而無需重新放置所有物體,這也很有用。
在您的立方體物體仍然被選中的情況下,按下“Alt+D”以製作一個連結副本。(非連結複製透過“Shift+D”完成) 現在按住“Ctrl”以以設定的增量移動,並將物體移動到我們的平面的一個角。確保物體的中心(由一個粉紅色的點表示)與平面的最角對齊。此時您可能會注意到,很難判斷物體的中心是否正好在平面的角上,這就是我們要按下“NumPad 5”或單擊“檢視”並選擇“正交”的原因。從實際意義上講,我們可以在建立平鋪圖案的過程中使用正交檢視,因為這個檢視對於平鋪至關重要。
現在在您的複製物體仍然被選中的情況下,將其縮放(“S”鍵),使其比第一個物體略小。然後使用“R”鍵將其旋轉。在旋轉時,可以透過分別鍵入“X”、“Y”或“Z”來限制到特定軸。
現在我們將製作我們旋轉和縮放的立方體物體的連結副本(Alt+D),並將一個副本放在每個角的網格上(記住在拖動時按住“Ctrl”鍵)。如果您將一個物體放在一個角上,您必須將其放在所有四個角上,因為角接觸 X 軸和 Y 軸。
現在您會注意到,在下圖中,我製作了一個跨越我們平面邊緣的物體。這很好。這是製作自然平鋪背景的方法。但是!無論何時我們這樣做,我們必須絕對確保在另一側也這樣做,否則我們的背景將無法正確平鋪。
所以現在我們建立了一些不同大小和方向的物體,但是它們都位於Z軸的相同位置。所以讓我們給我們的圖案增加一些深度——畢竟,這就是在 3D 中工作的好處!
在我們這樣做之前,我們希望將我們的指南平面移開。因此,右鍵單擊平面以將其選中,然後“Tab”進入編輯模式。按下“X”,從擦除選單中選擇“僅面”。現在“Tab”回到物體模式。好了!現在我們只有平面的線段作為我們的指南了。
按住滑鼠中鍵,同時拖動滑鼠以檢視我們的設計在三維空間中的樣子。現在右鍵單擊一個立方體物體,複製一個連結副本(Alt+D),並按下“Z”以將移動限制在 Z 軸。
沿著X和Y軸以這種方式導航,一旦找到合適的位置,就縮放和旋轉。請記住,當您跨越指南平面的輪廓時,在另一側製作一個副本。您可以像這樣繼續,用您想要的任意數量的物體填充您的平鋪圖案。網格是您在此過程中的好幫手,因此在移動跨越指南平面邊界的物體的副本時,您應該始終用手指按住“Ctrl”鍵。此外,任何將“平鋪”到邊界的物體都必須位於Z軸上與它在接縫另一側的對應物相同的點。定期按下“NumPad 7”以檢視您從 2D 角度的位置。這是我們最終將從該角度渲染影像的檢視,因此這個透檢視是最重要的。初學者,請記住滑鼠滾輪可以放大和縮小,而“Shift+滑鼠中鍵”允許您“拖動”移動。
請記住,在正交檢視中,我們無法感知物體的深度。那些遠處的物體和那些近處的物體似乎處於相同的距離。這就是我們能夠製作平鋪影像的原因,但它也限制了場景的明顯深度。我們可以透過縮小我們要顯示得更遠處的物體來彌補這一點。或者,就像在這個例子中一樣,我們可以簡單地製作每個物體大小不同,並將一些物體放在其他物體前面。
現在我們將相機直接放置在我們的物體叢集之上。按下“NumPad 7”,使用“Shift+滑鼠中鍵”將檢視居中在叢集上,然後使用滑鼠滾輪將檢視縮小几個檔次。從3D 檢視視窗的選單中,點選“檢視”>“對齊檢視”>“將活動相機對齊到檢視”。現在你可能想知道為什麼所有東西看起來都變形了。這是因為當我們切換到相機的視角時,檢視會自動恢復到透視檢視,因為預設情況下相機設定為該檢視。但就像我們在 3D 檢視視窗中切換到正交檢視一樣,我們也可以更改相機的檢視。在物體模式下,旋轉檢視直到你看到相機。它用一個金字塔形的線框表示,頂部有一個黑色三角形。右鍵點選選擇它。現在按下“F9”或點選編輯按鈕(它的圖示是四個頂點連線成一個正方形)。現在在相機面板中,你會看到一個標有“正交”的按鈕。按下它。按鈕上方有一個標有縮放的值。將其設定為大約 20。(參見下面的圖片)
在你的場景中放置一些燈光,併為你的物體新增一些材質。燈光和材質是需要單獨教程的主題,所以如果你還不知道如何做這些事情,請參考維基。
注意:我建議你均勻地照亮你的場景,以便使平鋪看起來連續。
注意:你也可以只使用太陽燈,這樣光線就會均勻地照亮整個網格!
現在你應該已經按照你的意願設定好了燈光和材質,是時候渲染場景了。在使用者偏好設定中點選“渲染”>“渲染設定”或直接按下“F10”。在格式選項卡中,你可以選擇渲染影像的尺寸、你喜歡的檔案格式和質量。我選擇的是 800x600,質量為 100%。
現在是時候開始後期製作了。在你的首選影像編輯器中開啟你的渲染影像。在這個例子中,我將使用 Photoshop。現在找到並標記瓷磚的四個角(當然是在新圖層上)。只需用肉眼估計即可。
我們將使用參考線來標記瓷磚的邊界。在 Photoshop 中,可以透過選擇“檢視”>“新建參考線...”來插入參考線。可以使用移動工具來定位參考線。你可以放大並確保你的參考線定位準確,方法是在按住“Ctrl”的同時輸入“+”或“-”。你現在可以隱藏或刪除帶有標記的圖層,因為那只是為了幫助我們獲得準確的參考線。
如果你決定製作一個動畫平鋪背景,我建議你在編輯之前將所有幀疊加在你的影像編輯器中,以保持位置一致。然後,你可以使用 Adobe ImageReady(隨 Photoshop 提供)或線上找到價格低廉、偶爾免費的 GIF 動畫程式來為它們製作動畫。
現在使用選框工具選擇參考線外部的一個區域。確保“羽化”設定為0px,選框為矩形,樣式設定為正常(表示沒有固定長寬比或固定大小)。此外,啟用吸附將會有所幫助,因此轉到“檢視”並確保它已為參考線啟用。
選擇區域後,複製(Ctrl+C)並貼上(Ctrl+V)。然後使用移動工具向右拖動,該部分應該會吸附到最右邊垂直參考線的內側。
選擇橡皮擦工具並選擇一個畫筆大小。我選擇的是直徑 65。你會想要使用一個柔和的漸變狀畫筆。現在擦除新貼上的選擇的左邊緣,使其與圖片融合。不要擦除任何右邊緣。
按下“Ctrl+E”或選擇“圖層”>“合併向下”。
好的,你剛剛執行了從左到右複製的過程 - 現在從下到上執行它。再次擦除邊緣。進行另存為。
最後,選擇將成為瓷磚的正方形中心區域,然後執行“影像”>“裁剪”。
現在將你的新平鋪背景縮放到適合網頁的大小。另存為 JPEG、GIF 或 PNG。你完成了!
注意:如果你的圖案仍然沒有完全平鋪,請再次載入帶有參考線的版本,並重複復制-貼上-擦除過程。請記住每次都將圖層合併,否則角落可能無法正確平鋪。如果仍然無法解決,請嘗試在網頁瀏覽器中平鋪背景,擷取螢幕截圖,將其貼上到你的圖形編輯器中,然後進行修飾。














