綠創體驗中心是中國醫藥大學附設醫院設置的一個綠能示範場域,結合了節能減碳、循環減廢、資源永續的環保教育農場,在官網設計中,我們採用 3D 模型互動的方式來介紹綠創體驗中心的特色,透過旋轉、縮放、點擊來與體驗中心互動的方式來達到沈浸式的使用體驗。
實勘
開始製作前,與中國醫藥大學的團隊一同前往實地做素材紀錄。
發想
以 Wireframe 來規劃操作方式,並在這個階段確認畫面會需要哪些 UI 元件。
繪製
工具:手繪/Procreate
透過現場的照片紀錄繪製每個場域的草圖,此階段可知道實際需要簡化哪些細節或凸顯哪些特徵。
建模
工具:Cinema 4D
以 C4D 製作每個場域的模型,確認特徵與草圖是否相符,並在下個階段開始增加細節。
貼圖/烘焙
工具:Substance Painter/Redshift Render
考慮到最終結果需在網頁上呈現,為了資源載入優化,許多模型的細節如凹凸表面、光影效果等,需透過烘焙貼圖(Texture baking)來實現。
這些貼圖能夠在不增加計算負擔的情況下提供精緻的視覺效果。
模型預覽
將每個場域的白模套上對應的貼圖。
Final
Model