↗ https://e-s.tw/404 來這裡玩
為什麼用Spline Tool？
我們應該是去年突然發現的網頁 3D 設計工具，由於一直沒時間嘗試看看，這次在慢慢重新 Build 新網站之時，終於有時間來體驗一下這個超酷的設計工具。由於類似蛋殼的霧面玻璃多面體物件貫穿了全站。在這次的頁面中，我們希望能夠延續網站的風格跟元素，打造一個高互動性的趣味 3D 場景，所以主角就是這個菱格霧面玻璃的蛋小哥～
你把他面向轉到自己還會看到臉喔～哈
快速介紹一下 Spline Design Tool
最厲害的地方就在，你不需要會寫程式，就可以做出 WebGL 互動 3D 體驗，可以結合到各種網站設計平台，例如 WordPress、Webflow等等。
介面直覺：操作方式跟一般 2D 繪圖軟體幾乎相同，放大、縮小、旋轉都不需要特別背快速鍵，相當容易上手！但由於還是基於 WebGL，使用起來並不會像真的 3D 軟體那麼的容易，如果一開始就懂 3D 的從業高手，反而會很不習慣他的操作方式。
即時渲染：製作過 3D 的人一定都相當重視渲染效能，而 Spline 在這點做得很好，可以在即時預覽材質的模式下編輯，預設的模型形狀也都能透過參數即時調整。
多人共編：線上檔案的形式，可以加入團隊成員協作，跟夥伴展示效果、溝通合作更加方便，自動存檔也不怕電腦突然當機～
網頁支援：Spline 是基於 WebGL 的框架 Three.js 的技術開發，對網頁的相容性很高，不需要特別轉檔也能在網頁中呈現完整作品。
互動效果：即使不會寫程式，也能運用軟體原生的功能製作動畫、按鈕互動，甚至是在這次專案中使用的遊戲互動效果。
Spline 就像是 No code 就能使用的 three.js ，程式參數中可以調整的部分都有對應的面板可以調整，不管是模型型態還是材質燈光都能快速預覽調整，大幅降低了 3D 設計和網頁工程之間的銜接難度！
接著我們就來帶大家操作一遍吧！
因為真的太有趣了，我們在以下做了簡單的教學，讓你輕鬆就也可以做到跟我們一樣的 3D 小遊戲！
場景設置
我們一開始就是想說要一直撞東西、然後很難跳，所以想出了這樣邪惡的環境...從鳥瞰的角度讓你們看看，我們設定了哪些物件。
以這個場景為例，主要的階梯、島嶼都是使用原生的箱型以及圓柱體。建立一個箱型，再往斜上方複製，就是一個能夠簡易跳動的場景了，再簡單製作一下電腦螢幕與馬克杯，就能算是一個辦公區了吧？如果你還有一點閒情逸致，可以做一些書本、吊燈、盆栽（這些較為複雜的模型，我是在 Blender 建模後匯入 obj 使用），讓畫面更豐富，待會也更多東西可以撞倒。
如何設置 Game Control 互動
接著就來看看怎麼做到好玩的角色環境互動效果吧～使用 W A S D 上下左右，以及空白鍵，就能操作主角在環境中自由探索。
首先點選我們的主角涼圓 （或者你也可以製作自己喜歡的角色，如果只是想體驗，可以只做一顆球就好），在 Event 中進入 Game Control 面板調整設定。除了 Game Control，滑鼠互動、播放式動畫等也都是在這個選單設定。
手機版本的控制介面（Touch control）記得打開，在沒有鍵盤的行動裝置中也能夠遊玩。
基本上在此時，涼圓就已經能在播放狀態下自由走動跳動了（撒花）！是不是超簡單的網站互動？真的不用寫程式。但還有一些設定需要調整。
目前 Spline 並不是按照角色模型精確計算角色的碰撞物理，而是要自己綁定一個範圍，可以選擇立方體、球體或是膠囊形狀。綁定的範圍太小會造成穿模，太大又會有角色漂浮的不協調感，要多嘗試調整成最自然的尺寸。
物理狀態的設定
如果你經歷了階梯的考驗，來到上方平台，就能體會到掛著無辜表情的涼圓，大殺四方破壞環境擺設的舒壓感。就讓我們來看看這些「能被撞倒」的物件，是如何設定的。（記得要打開環境的物理效果）
將物體的物理計算打開，否則角色接觸時會直接穿模。不能移動的物體（如階梯）設置為 "Positioned" ，可移動物體（如電腦）則設置為"Dynamic"。若設定為 Dynamic，重量、摩擦力、彈力等細節，都還能夠再調整。佈置完切換到播放模式，檢查動態物體是否會有傾斜不穩的情形。
主角動態細節
我們的涼圓在走路時會上下彈動，在跳躍時則有翻滾動態，這些都增加了遊玩體驗的豐富程度。這些細節也都能在 Gmae Control 的 "Behavior" 面板中增添！
"On jump" 調整的是跳起時的動作， "On move" 是走路時的動態， 而 "On Idle" 則是設定靜止時的呼吸動態。
三個模式設定的方式相同，需要用到動畫基本的 Key Frame 觀念（在這裡叫做 State）。必須要先設定不同的 State，利用 State 的切換來展示動態。
官方文件有特別提醒，動態的 State 建議包在另一層群組中，不會跟 Game Control 指定的標籤重複，運作效能會比較好喔！
以這個彈跳的動態為例，就是讓中間的蛋黃在蛋殼的上下位置來回切換。還可以利用之前提過的緩動函數概念，搭配延遲與重複，讓細節更加完整。
這樣大至上就完成了互動的部分～接下來要加多少東西就自己來了！
如何嵌入程式碼
你可以選擇 Export 的種類滿多的，有 Threejs、Vanillajs、iframe 等等，可以透過右上角的 Export 選擇自己想要的方式。而我們則是選擇了 Vanillajs，因為不想要有浮水印 Logo，也想要可以安插在自己網站之中，可以依照自己想要的方式排版。
不要以為到這裡很難喔，就算選擇 Vanillajs 也只是隨便幾行 Code 而已。
import { Application } from '@splinetool/runtime';
const dom3d = ref()
onMounted(() => {
nextTick(() => {
const canvas = dom3d.value.querySelector('canvas');
const spline = new Application(canvas);
if (window.innerWidth < 768) {
hideDeskText.value = true
}
spline
.load('https://prod.spline.design/z5EVurxASQnnnF3A/scene.splinecode')
.then(() => {
spline.setSize(window.innerWidth, window.innerHeight)
})
})
})就真的只有這樣而已！！ 引入就會動呢～只是要注意，因為我們是 Vanilla 用 Vue 自己組裝的，要在 Client 端 / 使用者端呼叫程式碼喔，反正不需要 SEO，一切就丟給瀏覽器就好～
