設計工具 Spline 分享 (1) ：輕鬆建造 3D 模型，打造可互動式的網站體驗✨
前言
黑創的 Virsody 成功打造了多個線上 3D 虛擬展間，是黑創的一大亮點✨ 看了讓人不禁好奇，這是怎麼做出來的呀？虛擬展間相當龐大，對於仍想嘗試 3D 的入門者來說，我們推薦 Spline 這個好用的設計工具。 Spline 相當親民，即使是沒學過 3D 建模的人也能輕鬆上手。今天就來帶你一步步熟悉這個設計工具，打造獨一無二的 3D 互動體驗式網站。
Spline 簡介
Spline 是一款製作 3D 互動體驗式網頁的設計工具，不同於其他建模軟體，你可以選擇在瀏覽器裡直接製作，也可以下載桌面版軟體製作，就跟 Figma 一樣。其他的建模軟體可以建造模型、貼材質和製作動畫，這些 Spline 通通都可以達成；你也可以選擇在其他建模軟體內建好模型，再匯入 Spline 裡面。
而 Spline 跟其他建模軟體最大的不同在於，Spline 匯出的檔案可以讓網頁直接使用，設計完成後，匯出檔案交給工程師，3D 模型就能直接出現在網頁上，實現你的 3D 互動體驗式網頁✨
那麼接下來你一定會想問，這麼神奇又好用的軟體該如何操作呢？最基本就是要先從建模開始起步，再學習如何設定互動，讓模型動起來。今天就帶大家來練習基本的建模和互動設定，熟悉操作 Spline。練習題目如下圖，製作一個可以「互動」的電玩遙控器模型，上面的每個按鈕都可以透過電腦鍵盤操作，實際模擬真實遙控器的運作，可以先從網路上找一張接近下圖的參考圖片。
Spline 介面
開啟 Spline 後，會發現它的介面相當直覺易懂，左邊是圖層，放置你所有的模型物件；右邊是設定物件、背景樣式的區域；中間就是工作區域，在工作區域上方可以挑選你想要新增的物件，下方則可以控制視角。系統預設開啟後畫面中央會有一塊方形和一盞燈。
Spline 快捷鍵
．滑鼠左鍵 + 空白鍵：平移視角
．滑鼠左鍵 + Alt ：轉換視角
．M ： 切換透視模式
．Ctrl + D ： 複製物件
製作模型
首先先把找到的參考圖片放入 Spline 裡，只要直接拖曳圖片到工作區域中，圖片就會自動進入 Spline 裡，出現在畫面中。在右側設定區域的 Position 中調整位置，把參考圖的 X、Y 和 Z 數值均設為「0」，接下來就能開始建模。
從遙控器的身體開始製作，在上方選取「+」，在選單中尋找「Cube」，新增一個，將它放置於參考圖上，覆蓋於兩個突出物外的整個紅色區域；再來到右邊的設定區塊中，先調整物件的厚度，在「Shape」中的「Size」裡調整 Z 軸的長度，這裡範例設定為 50 ，可依據物件整體比例調整數值。接著在「Material」中，將物件顏色透明度調整到 50% ，讓後方的參考圖顯示在物件後方，方便精準地塑形。
調整物件大小厚度：右邊設定區域中 Shape > Size > Z 修改為 50
調整透明度：右邊設定區域中 Material > Color > 100 修改為 50
製作把手 ／ 編輯模式
接著我們要製作兩個突出的把手，從剛剛的身體延伸出去，那要如何製作把手呢？在右邊區域點選「Smooth & Edit」，進入物件編輯模式，這時就可以調整物件形狀，在工作區域最上方左邊三個圖示，可以分別切換「點／線／面」的編輯模式。畫面中物件會變形，因為此時在剛剛點選的區域中會出現一個 「Subdivision Modifier」，這是將物件細分表面的調整器，能幫助物件邊緣變的滑順，但此時還不需要。我們先將預設數值「1」調整為「0」，就能將物件恢復原狀。
細分表面：右邊設定區域中 Subdivision Modifier > 1 修改為 0切割工具「C」／ 滑動工具「E」
再來要從身體延伸出把手，我們需要先切割模型，在把手的位置上切出面，再從面延伸出把手。切割工具的快捷鍵是「C」，按下後即會出現切割線，切出一條垂直線在物件正中央後，按下滑鼠左鍵，確認切割。切割後再調整線的位置，快捷鍵是「E」，按下後拖曳上方的藍色滑桿，將線段調整到左邊把手的位置。另一邊的把手依上述如法炮製。完成後如下圖：
擠壓工具「X」
接著在工作區域上方，將編輯模式從「線」改為「面」。長按「滑鼠左鍵 + Alt」 ，轉換視角選取切割出來的面，按下「X」，從被選取的面中擠壓出新的「Cube」，拖曳藍色滑桿調整至適當的大小，另一邊把手依樣畫葫蘆，完成品如下圖：
細分表面
現在的物件是平平整整，下一步就是要將它變成更貼近參考圖的圓滑造型，這時就要用到前面提過的 「Subdivision Modifier」，把物件調整成更加滑順的形狀。數值越高，物件表面被細分的倍數越大，這裡我們將數值從剛剛的「0」調整到「3」，可依據實際製作情況調整數值。此時物件的形狀變圓滑了，但是仍沒有很貼合參考圖，需要調整細節。
顏色設定
將編輯模式從「面」改為「點」，選取各頂點，一一調整到適當位置，直到形狀符合參考圖。調整好後，可以按「Esc」退出編輯模式。建好形狀後，接下來更改物件顏色，在右側區域「Material」中的「Color」裡選取想要的物件顏色。做完後，可以在左邊圖層中將物件命名為「Body」。
這裡教大家一個小撇步：物件顏色設定完成後，可以選取 Material 旁邊四個點的圖標，將顏色新增為材質樣式，以後新增的物件有相同顏色需求時，可以直接使用。
製作按鈕
十字按鈕
下一步要製作遙控器上的按鈕。可以先在左邊圖層中按下「Body」旁邊的鎖頭圖示，將「Body」鎖定，固定在位置上。先從十字形的按鈕開始，從選單中新增一個「Rectangle」，放置於參考圖上，從垂直向開始製作。將「Rectangle」的 Z 軸位置設為 22 ，貼合「Body」；在這裡，我們也在「Material」中設定物件的「Lighting」，點選「Lighting」旁的圓球圖標，會出現一個選單，設定第一列的「Type」，將「None」調整成「Phong」。
Phong Lighting：基礎光照，Phong光照模型是真實圖形學中提出的第一個有影響的光照明模型，該模型只考慮物體對直接光照的反射作用，認為環境光是常量，沒有考慮物體之間相互的反射光，物體間的反射光只用環境光表示。Phong光照模型屬於簡單光照模型。擠壓
由於「Rectangle」是 2D 形狀，在右邊中的「Shape」中調整「Extrusion」數值，設為 3 ，可以擠壓出新的面，應用在這裡的效果可以幫「Rectangle」增加厚度。
按鈕細節設定
接著觀察參考圖，十字按鈕有圓角、邊緣也有圓弧。這些在右邊中的「Shape」中都可以設定，調整「Corner」的數值，可以得到圓角；調整「Bevel」的數值，可以讓邊緣產生斜邊；「Bevel Sides」可以細分斜邊，得到邊緣圓弧的效果。
擠壓設定：右邊設定區域中 Shape > Extrusion
圓角設定：右邊設定區域中 Shape > Corner
斜邊設定：右邊設定區域中 Shape > Bevel
細分斜邊：右邊設定區域中 Shape > Bevel Sides完成
接著製作水平向，「Ctrl + D」複製剛剛製作的垂直向「Rectangle」，在「Events」中的「Rotation」調整 Z 軸的數值。將它轉為水平向。接著選取兩個「Rectangle」，找到右方區域的「Boolean Modifier 」也就是布林運算，點擊 「Operation」右方第三個圖標，將兩者合併成一個物件。合併後記得將透明度調回 100% ，十字按鈕即完成，在左方圖層中可以命名為「Cross Button 」。
圓形按鈕
圓形按鈕可以拆分為四層，先從最左邊的圓形按鈕開始。觀察參考圖，按鈕底盤由一圈微微突起，跟「Body」同色的環狀物和一個灰色圓盤所組成；按鈕主體則由另一個環狀物和一個圓盤組成。
按鈕底盤
先從外圍的紅色環狀物開始製作，新增一個「Torus」，放到參考圖上。透明度先調為 50% ；在「Position」中調整「Torus」和「Body」的相對位置。將之前製作「Body」時所新增的 Material 顏色樣式，套用到「Torus」上，接著製作灰色圓盤，新增一個「Cylinder」，調整大小，放置到「Torus」中央，稍微突起一點，完成按鈕底盤。選取這兩個物件，按下「Ctrl + G」將它們組成群組，左邊圖層中命名為「Bottom」。
按鈕主體
再新增一個「Cylinder」，放置於適當的位置，調整大小後，觀察參考圖，「Cylinder」一樣有著圓滑的邊緣，在「Shape」中調整「Corner」和「Corner Sides」的數值，製造效果。中間的圓盤我們可以直接複製圓柱體修改製作，調整大小位置後，將「Corner」和「Corner Sides」的數值調至最小，即可得到圓盤。將兩者顏色分別設定成想要的顏色後，組成群組，完成按鈕主體。
按鈕底盤和主體都完成後，可以再將兩者組成一個群組，命名為「Round Botton」，其他圓形按鈕可以直接複製這個群組物件，再調整大小即可。方形按鈕製作方式也是如此。
增加文字
按鈕上的文字可以透過上方工具列來增加，新增文字物件後，輸入文字，在右方的「Text」區塊中，可以設定文字顏色、大小和字體等。設定完後，再調整文字位置，就完成了。
背景製作
將預設的「Rectangle」在右側中調整成想要的顏色，當成地板；接著調整背景顏色，不要選取任何物件，直接在右側區域中找到「Frame」，在「Frame」中調整「BG Color」，就能讓背景不再是預設的深色。
互動製作
接著就要來說明如何製作互動模式，要設定按鈕如何運作，就要分成兩部分，首先要設定各個物件在不同情況下的每一種狀態，接著要為每一個狀態設定觸發事件，意即當發生某件事時，就會觸發這個狀態。
比如圓形按鈕有按壓下去，和彈跳起來恢復原狀兩種狀態。兩種狀態設定好後，就要設定在按下鍵盤上哪個按鈕時，按鈕會被按壓下去，及當放開按鈕時，遙控器上的按鈕也會相應地恢復原狀。
狀態設定
要新增一個狀態。這個功能要在「State」中設定。以最左邊的圓形按鈕為例，新增一個「State」，第一個設定它被按壓下去的狀態，將按鈕轉到側視角，移動它的位置，完成第一個狀態設定。這邊建議設定「body」群組，因為實際上按鈕底盤並不會跟著按鈕本身被壓下去。
事件設定
這個功能「Events」中設定。新增一個「Events」，首先是「Type」，這是設定事件種類，可以是開始、按下鍵盤按鈕、滑鼠滾輪等，這裡我們設定「Key Down」，也就是按下鍵盤按鈕。下方的「Key」是輸入按下的鍵盤按鈕，這裡我們輸入 Z。再往下有個「Duration」，是執行動作的總時長，我們將它調整為 0.1 秒。意即按下 Z 鍵時，最左邊的圓形按鈕會呈現往下按壓的狀態。
每一個狀態對應一個事件，有了按壓，接下來設定恢復原狀的觸發事件。我們再新增一個「Events」，「Type」設定為「Key Up」，意即 Z 鍵彈起；「Key」一樣輸入 Z ；「State」調整為「Base State」，意即恢復原狀的狀態；「Duration」一樣設定為 0.1 秒，此時就大功告成了。
要讓其他按鈕也有互動效果，只要繼續新增「State」設定狀態，和設定相對應的「Events」，就能達成。
成品
可以按下上方的播放鍵，測試剛剛設定的互動效果。如果設定成功，就會看到遙控器模型上的每個按鈕，都按照設定好的鍵盤按鈕，或是滑鼠互動。一個完整的電玩遙控器互動模型就完成了。
以上是今天的分享，後面還會有兩次的 Spline 分享，介紹更多的功能和特效互動，敬請期待！
