設計工具 Spline 分享 (3) ：輕鬆建造 3D 模型，打造可互動式的網站體驗✨
前言
在上次的分享中我們建好了迷宮場景和角色，今天會教大家如何輸出成品，並且搭配音效，還會補充一些 Spline 的其他功能，希望能夠幫助大家在往後的創作上更加順利。
設計工具 Spline 分享 (1) ：輕鬆建造 3D 模型，打造可互動式的網站體驗✨設計工具 Spline 分享 (2) ：輕鬆建造 3D 模型，打造可互動式的網站體驗✨
音效
在第一次的分享中有教大家做互動設定，但其實 Spline 的互動不只是操控鍵盤，讓物體上下移動而已，還可以播放音效。首先開啟上次的檔案，選取任一想加入音效的物件，這裡我們選取 Sphere 作為示範。
記得上次介紹的互動設定是在 States 和 Events 裡面嗎？這裡幫大家快速複習一下，要幫物件加入互動，首先要在 States 裡面設定物件的移動狀態，再到 Events 裡面設定觸發事件。要幫物件加入音效也是在同一個地方設定，但是這次我們不用幫物件設定 States ，直接設定 Events 即可，因為播放音效的時間不長，幫物件加入音效，並不會讓物件產生持久的位置或是型態的改變，不需要用到第二個操作指令讓物件還原。但若是加入較長的音樂，或是想讓音效可以自動循環，想暫停時再用鍵盤操控，就需要設定 States，才能控制音樂的播放和暫停。
選取 Sphere 後，新增一個 Events，第一列預設 Start，點選 Start 會出現一個選單，往下找到 Play Sound，這就是讓物件播放音效和音樂的選項，下面的 Interaction 選擇 Play，When 設定讓滑鼠或是鍵盤操作，這裡我們選擇 Mouse Down，也就是對著該物件按下滑鼠左鍵時，即可播放音效。
往下的 Sound File 選項是選擇想要播放的音效，Spline 內建有提供音效，點擊四個小點即可選擇，裡面有相當多種音效可以選擇，但只有最上方是免費音效，下方都是要付費才能使用的音效，這裡我們選擇音效 Bubble。若想使用自己的音樂或音效，可以選取 Upload，上傳自己的音檔，要注意軟體限制不可超過 2 MB。
選擇完音效後，下面還有 Toggle（切換）、Volume（音量）、Delay（延遲）跟 Loop（循環）等進階設定，可視個人需求編輯音效。其他物件也可依此方式加入音效。
加入音效：右方設定區域 ＞ Events ＞ ＋ ＞ Play Sound
Post - Processing
作品已經趨近完成，如果還想要更加精進，可以學習使用 Post－Processing 後製處理這個功能，這個功能可以讓整個 3D 世界變得更加酷炫。這個功能在右側區域中，前一篇分享過的設定 Fog 迷霧效果上方，可以找到 Post－Processing 這個功能區域。先不要選取任何物件，開啟功能後，可以看到有七個設定選項，每個選項都能為作品帶來不一樣的效果，也能互相搭配使用，這裡我們介紹 Aberration 和 Bloom。
Aberration 色差
Aberration 是色差，開啟這個功能後會發現場景中的物件顏色都起了偏差，並且帶有色暈，可依個人喜好，調整相關設定。
Bloom 光效
Bloom 就是光線散射，開啟後場景中的每個物件周圍都泛著微微的光暈，看起來彷彿自帶仙氣一般，相當夢幻。
其他還有五種不同功能的特效，這裡就不一一介紹，留給大家自行探索。
Post－Processing 後期處理：右方設定區域 ＞ Post－Processing ＞ 開啟功能
互動設定
我們的小兔子在迷宮裡要尋找牠的紅蘿蔔，在第一篇中就有分享過互動設定，可以回頭看這篇：設計工具 Spline 分享 (1) ：輕鬆建造 3D 模型，打造可互動式的網站體驗✨，運用 States 和 Events 來建立互動模式。
動畫
儘管 Spline 可以設定狀態重複發生，但是無法像遊戲那般用鍵盤，讓小兔子一格格前進，那接下來該怎麼辦呢？可以用短動畫的形式來模擬，讓小兔子移動到終點。該怎麼做呢？一樣先設定 States，將小兔子移動至紅蘿蔔後方，接著設定 Events，將觸發事件設定為 Start，也就是一打開作品時，小兔子就會自動移動到紅蘿蔔那。如此一來，當作品觀賞者一打開網頁時，就能看見小兔子穿梭過整個迷宮。
輸出設定
最後來到輸出成品的階段，在工作區域正上方有一個 Export，點選後即可設定輸出格式，輸出前也可按下右邊的播放鍵，預覽輸出的成品樣貌。點選 Export 後，先選擇要輸出的檔案格式，可以選擇輸出的檔案類型如下：
Public URL
Public URL 是網址，複製後可以直接分享，就能出現在螢幕上，下方圖片的文字連結，就是嵌入了 Public URL。
Code
Code 是程式碼，可以直接交給工程師嵌入網頁中。
Image
Image 就是圖片檔，可選擇匯出 JPG 或是 PNG 檔。
Frame Recording
Frame Recording 是專門用來輸出影片和 Gif 的檔案類型，若要輸出影片和 Gif 檔，就要選擇 Frame Recording 。
.gltf
若是在 Spline 中建好模型後，想直接匯出到其他 3D 軟體內，可以選擇 .gltf 檔匯出，就能將建好的模型放進其他 3D 軟體。
.spline
就是單獨存一個 Spline 檔案，直接點選就能開啟檔案，不需要在軟體首頁中尋找檔案。
Export 輸出：工作區域上方 ＞ Export ＞ Public URL／Code／Image／Frame Recording／.gltf／.spline補充介紹：貼材質
你沒看錯，和其他建模軟體一樣，Spline 也可以貼材質在模型上。那要如何貼材質呢？其實很簡單，同樣在 Material 中設定即可，還記得在第一次的分享中，教大家在 Material 中的 Color 更改模型顏色嗎？點選 Color 右邊的箭頭，在下拉選單中選取 Image ，軟體中有一些現成的材質可以挑選，但如果想要加入特定的材質呢？可以選取 Upload Image ，上傳自己挑選的材質貼圖。
設定模型材質的原理就是將材質當成圖片，貼到模型上，像填色一樣。 Material 下方的選項中可以進一步設定貼上材質的細節，像是 Projection（投影）、 Wrap（覆蓋）、 Crop（裁切）、 Scale（比例）和 Offset（投影）等，將材質修飾得更加細緻。
貼上材質：右方設定區域 ＞ Material ＞ Color ＞ Image補充資源：3D 素材資源庫
如果不知道上哪兒挑選材質貼圖，以下就提供兩個3D 素材網站資源，可以上去挑選更多想用的貼圖，和 Spline 搭配使用，點擊網站名稱即可前往：
1. Poliigon
在使用這個網站的資源時，需要先辦一組帳號，才能下載網站資源，要注意的是有些資源是需要付費才能使用。
這個網站提供的材質貼圖高達 7000 多種，全都歸類在 Textures 項目中。可依照 Textures 的子項目縮小搜尋範圍，更快找到目標材質。
對於其他 3D 建模軟體如 Blender 、 Maya 和 3D Max 來說，Poliigon 除了提供 Textures 材質貼圖，還提供了 HDRIs（高動態範圍成像貼圖）、Models（3D 模型）、Brushes（雕刻筆刷）等素材，是許多 3D 愛好者會前去挖寶的地方，相當實用。
2. Poly Haven
相較前者，Poly Heaven 上的素材都是完全免費，也不需要註冊帳號才能下載資源。但 Poly Heaven 只提供了 Textures／HDRIs／Models，沒有提供 Brushes 的資源。
以上兩個 3D 素材網站均是相當全面的 3D 素材資源庫，可以自由地在 Spline 和其他建模軟體中使用，相當值得前去探索。
總結
Spline 的分享就到這邊，還想更進一步鑽研 Spline 的朋友們，可以上網搜尋，這邊也推薦 Spline 的官方 YouTube 頻道，上面分享了許多教學影片，歡迎大家前去挖寶，一步步打造出屬於自己的 3D 特效網站。
Spline 是很新的軟體，仍在持續地開發中，是一項前景被看好的設計工具，含金量相當地高。目前現有的資源就已足夠滿足你想要擁有一個 3D 特效網站的夢想，期待未來解鎖更多新功能後，可以做出更加酷炫的 3D 特效網站。這麼好用的設計工具，今年絕對不容錯過！
下面也分享一些 Spline 的官方粉專社群資源，喜歡 Spline 的朋友們可以在上面找到一群同好，切磋並分享自己的作品，歡迎大家加入，和世界各地的朋友們一起成長。同時也請持續關注黑創的 Medium，未來還會有更多新奇有趣的分享，敬請期待！
．Spline 官方網站（桌面版軟體在此下載）
