MagicaVoxel製作立體GIF動畫

簡稱VIF(Voxel InterchangeFormat)

前言

直接先上成果，這是以MagicaVoxel模型設計，搭配Three.js進行渲染做出來的3D動畫效果，雖然這下面這3張放的只是動圖，但他確實是從3D場景中擷取下來喔，這種效果是怎麼做到的呢。

在MagicaVoxel畫好靜態模型之後，總是會進一步希望他能夠動起來，之前找過非常多方法，包含用Mixamo、Blender、Blockbench等等軟體或平台，但都多少有些不盡理想的地方，限制過多、使用困難、應用不廣等等，但找不到更適合的所以只能先將就著用。

我的想法很簡單就是最基本的動畫原理，快速切換造成的視覺暫留，平面動畫檔最精簡的格式GIF檔，就是將多張靜態的圖案快速切換來達成動畫的效果，那為甚麼3D動畫看來看去都是骨架動畫，怎麼就不能用快速切換模型的方法哩。

VIF展示網頁

這裡我使用的是網頁端的Three.js套件來呈現動畫效果，在此我稱之為VIF(Voxel InterchangeFormat)圖，很早之前就有做這種3D動畫的構想，可惜自己程式技術能力不足，知道Three.js有機會做出這種效果，卻實在沒時間慢慢研究。但現在有了chatGPT大神可以討論，跟他說想要的功能就能馬上得出範例程式，機綁上想得到就能做得到。

直接點擊網址進入VIF動畫展示網頁，點擊彈跳史萊姆取得示範動畫。

整個網頁介面相當簡單，就是一個Three.js的3D場景，加上一個檔案上傳按鈕，3D場景中有一個白網格作為參z=0的考平面，預設載入一個小兵揮劍的動畫，接著點擊畫面左下的檔案上傳按鈕，開用預先下載的動畫檔，史萊姆就會直接呈現在場景中間。

如何製作

所以這種動畫究竟要怎麼畫呢?用MagicaVoxel開啟史萊姆vox檔，並按下Tab鍵切換到world mode，我習慣稱此模式為物件模式，會看到各種形狀的史萊姆作為子物件排成一列，在網頁中史萊姆動畫就是在這7個模型之間快速交替出現達成的。

接著點開右側的Scene Outline，編列著每個史萊姆的名稱，由左至右分別為1~7號，網頁中就是outline從上至下依序出現、其餘消失，以此達成動畫效果，按照順序在空間中排成一列，只是在設計動畫時方便整理，目前只是簡單介紹展示網頁與動畫原理，之後還會介紹設計時的一些原則與技巧。

用這種方式製作動畫最大的優點在於，從頭到尾只需要精通MagicaVoxel一套軟體，能將心力放在設計素材本身，而不是花時間再去學一套新的軟體，但這畢竟是設計動畫，想做出心目中的效果依然要花許多時間跟精力去細細打磨。