Spline Design 是一款可以繪製並匯出 3D 設計至網頁的工具。我第一次是在臉書看到有人分享，今天下載過後，覺得功能強大且有趣，後續會試著玩玩看再分享心得，今天先來簡略介紹一下 Spline。

先看一下我從 Library 下載下來的檔案輸出成 Public URL 用 iframe 嵌入的效果。

Spline 可以做到：

  • 旋轉、移動、縮放 3D 畫布
  • 使用滑鼠和物件互動
  • 互動的即時反應很順暢
  • 可輸出多種格式檔案 (URL, Canvas js, 圖片, 影片)

但目前測試出美中不足的地方：

  • 輸出、儲存等動作需要等候時間 (類似做影片輸出和儲存也需要等程式做編譯)
  • 網頁成品一開始讀入需要等一段時間，但讀完的操作算很順暢
  • 免費版成品會壓 Spline 的浮水印

Spline UI

Spline UI


* Tap bar: 檔案頁籤，可開多個檔案作切換 * Toolbar: 繪圖工具 * Left Sidebar: 圖層面板，可以整理各圖層 * Right Sidebar: 屬性面板，可以控制顏色、環境設定、輸出等參數 * Viewport: 製圖區，3D 圖呈現的地方

Presentation Mode

Presentation Mode

Presentation Mode 是可以讓使用者預覽作圖出來的互動效果。因為這個步驟還沒涉及到輸出，所以不用花太多時間等待就能看到製作的預期結果。

Exporting

他的輸出類型可以是: Public URL, Web Content, Image, Video.

因為這次是簡介，所以就先展示若輸出成 URL 會有 spline 給的網址如下。

Exporting URL

Reference