Scroll to top
keep salute  -    keep fun  -

LINE Christmas in Town ─ 聖誕城事

LINE 聖誕節 網站 LINE Christmas in Town ─ 聖誕城事 LINE聖誕城事|LINE官方帳號

杉悟互動 杉悟有限公司 Salute Interactive 網站製作,網站架設,網站設計

LINE 聖誕節 網站 Salute Interactive 杉悟互動|網站設計

LINE Christmas in Town ─ 聖誕城事 每年的12月,總是沈浸在聖誕與跨年的濃濃節慶氛圍中 很開心參與這次由 LINE 發起,台灣電通 策劃及 Salute Interactive 統籌製作的聖誕節 活動網站 ─ LINE聖誕城事 主要目的是推廣 LINE官方帳號,藉由數十間品牌群聚,形成一個虛擬城市 開啟禮物盒即有機會抽獎,並且在瀏覽城市的同時,還能得到每個品牌提供的專屬優惠!

BMW 3 series G20|網站製作 isti-kets|網站製作

LINE Christmas in Town ─ 聖誕城事|coverphoto LINE Christmas in Town ─ 聖誕城事|lottery demo
網站 行銷活動

LINE Christmas in Town ─ 聖誕城事

每年的12月,總是沈浸在聖誕與跨年的濃濃節慶氛圍中
很開心參與這次由 LINE 發起,台灣電通 策劃及 Salute Interactive 統籌製作的聖誕節活動網站 ─ LINE聖誕城事
主要目的是推廣 LINE官方帳號,藉由數十間品牌群聚,形成一個虛擬城市
開啟禮物盒即有機會抽獎,並且在瀏覽城市的同時,還能得到每個品牌提供的專屬優惠!

 


 

⌈ 馬上體驗 ⌋

LINE 聖誕城事 ─ 此為工作室留存版本/請使用手機體驗

 

網站製

Virtual City
這次為了在網站中創造一個真實的虛擬城市
運用了 three.js 這個套件,在網頁中運算一個即時的3D空間

禮物盒的開啟、路上的車子到時不時飛越的聖誕老人,都是即時在網頁內運算的
並且配合當下的時間,設定了白天與夜晚不同的光景

3D model
關於這次的模型,我們使用的是 three.js 官方目前最推薦的 .gltf (GL Transmission Format) 格式
gltf匯出時支援自帶材質,貼圖,動態,攝影機等,幾乎是除了燈光以外,都包含了
但可能是近幾年才開始受到關注的格式,且網頁中渲染完整3D場景討論也比較少,使用前需要謹慎評估

Performance
而整個製作最大的技術重點就在於效能的優化,從載入資源,渲染,動態運算
也因為效能問題,被迫捨棄局部特效
若對 three.js 效能優化有興趣的人可以 參考以下這篇
[ THE BIG LIST OF three.js TIPS AND TRICKS! ]
照著步驟一步一步調整,相信會有蠻不錯的效果

 

⌈ CREDIT ⌋

製作統籌 ─ Salute Interactive
活動標準字 ─ 台灣電通
PM ─ 曹詠峻,陳宥郡 Chloe Chen
美術設計 ─ 曹詠峻
3D前期美術 ─ 黃鈺嵐 Beryl Huang
Modeling ─ 陳宇森Yu-Sen,楊峻鵬 Haimiaan.Art
Animation ─ 陳宇森Yu-Sen,楊峻鵬 Haimiaan.Art
Compositing ─ 陳宇森Yu-Sen
網站前端 ─ 曹詠峻,龐禹菁
網站後端 ─ 丁偉哲,黃莨權
後端技術顧問 ─ 安永金融科技

 

#LINE聖誕城事 #LINE官方帳號
#台灣電通 #DentsuTaiwan
#SaluteInteractive #杉悟互動
#聖誕節 #MerryChristmas #Christmas #Xmas #X’mas
#HTML5 #webGL #threejs #interactive
#網站製作

  • Brand

    LINE

  • Agency

    台灣電通

  • Production

    杉悟互動

Share project
Open Website