Contact
用 3D 動畫打造豐富的 LOGO 動畫效果
此篇作者為 GEAR8 JP 的前端工程師須藤良太。
大家好，我是負責前端與動畫的須藤良太。
這次要和大家聊聊在「NAKAJIMA Group 診所開業支援網站」改版專案中，我所製作的 3D 動畫。
Group 診所開業支援網站：https://www.nakajima-phar.co.jp/clinic-kaigyo/
我負責了主視覺的這支 3D 影片。
對於動畫的需求
最初從網站總監（Director）那裡接到的需求如下：
- 想用 3D 做大範圍的動態效果
- 相較於速度感，更希望能呈現「大氣、緩慢（營造信任感與安心感）」等意象
- 如果可以的話，希望能結合滑鼠互動
這是當時拿到的概念圖（當時還沒做出 3D 效果）：
平時做 3D 時，我大多會採用「即時渲染 3D」（Real-time 3D），但這次我們決定改用「3D 影片」的方式來呈現。
「即時渲染 3D」跟「3D 影片」有什麼不同？
在網頁上實作 3D 時，主要有兩種手法：
| 即時渲染 3D（Real-time 3D） | 3D 影片 | |
|---|---|---|
| 做法 | 在 <canvas> 上運用 Three.js 等技術進行即時繪製。 | 使用 Blender 等 3D 軟體製作後匯出為 MP4 影片，再嵌入網站中。 |
| 優點 | 可以配合滑鼠移動進行自由的變形與互動。例如隨著滾動改變鏡頭角度、變換顏色等。 | 在打光、對焦（故意製造景深/景深模糊）等方面表現力極高。 |
| 缺點 | 不適合用於打光、模糊等想要呈現高質感的場合。 | 無法做配合滑鼠移動的互動機關，就只是單純播放影片。 |
| 適用場景 | 活潑的網站，或是想做出配合操作的趣味小機關時。 | 重視厚重感、真實感與整體氛圍時。 |
| GEAR8 案例 | 「北大 Tech Garage」 網頁能即時旋轉，隨著滾動滑鼠，立方體各面會逐漸填上顏色。 https://hokudai-hutg.com/ | 「NAKAJIMA Group 診所開業支援網站」改版專案 https://www.nakajima-phar.co.jp/clinic-kaigyo/ |
這次專案與「3D 影片」的需求完全吻合，因此我們決定採用影片的方式。
……啊，順帶一提，當初需求裡的「如果可以的話，希望能結合滑鼠互動」這次就放下了。（因為比起互動，傳達「信任／安心感」更重要啊……）
動態效果與注意細節
在製作時，我特別注意了以下這 3 點：
- 鏡頭焦點（為了營造氛圍而故意拉出景深/模糊效果）
- 光源的位置、強度與範圍
- 鏡頭移動的速度
1. 鏡頭焦點（為了營造氛圍而故意拉出景深/模糊效果）
用手機拍照時，故意讓背景或前景變模糊是一種很常見的手法對吧？在 3D 世界裡這麼做，也能大幅提升真實感與材質質感。不過要拿捏「太超過」與「不夠到位」之間的平衡有點難度。
將焦點放在前景，並讓背景產生動態模糊/景深效果。
2. 光源的位置、強度與範圍
光源可以自由調整並放置「位置」、「數量」、「光照強度」、「半徑（光照範圍）」與「燈光顏色」等參數。透過放置單個或多個光源，不斷試探能讓畫面看起來「感覺不錯」的角度與位置，同時也要考量到產生的陰影。這部分感覺蠻需要一點美術與設計品味的。
3D 軟體「Blender」的編輯畫面。 橘色的圓圈是球形光源。
3. 鏡頭移動的速度
運鏡時，讓鏡頭一邊移動，一邊從各種角度展示 Logo。此時 Logo 本身保持靜態，只有鏡頭在動。移動速度太慢或太快都不行，拿捏速度的緩急節奏非常關鍵，在還不習慣之前可能會覺得有點困難。
結語
這次製作的 3D 動畫無論在公司內部或外部都獲得了很高的評價，真的很開心！乍看之下門檻好像很高的 3D 技術，不僅能為網站做出獨特性，也非常值得投入時間學習呢！
