😚 ES Design:此網站必須啟用 ✪ Javascript ✪
數位品牌玩樂設計
ES Design Loves Egg!👋 

Detective Deduction

YEAR2022
CLIENT台中國家歌劇院
SERVICE程式開發、程式顧問
網站設計作品 - 偵探學長頸鹿特效互動網站

專案背景

偵探學為台中國家歌劇院駐館藝術家周曼農聯合許多專業藝術家,所創作之空間藝術,由探索筆記本為出發點。此專案並非由我們親自設計與藝術家溝通,而是作為技術顧問身份協助 StudioPros 設計UI介面。

程式概念

我們另外建議使用 3D 環境技術的形式來製作 2D 的平面場景,這樣不僅能增加整體空間的透視感,更能藉由鏡頭移動達到仿 Parallax Mouse Move 的效果。我們將 StudioPros 所設計的平面場景,一一搬動到 3D 軟體進行組裝。

最後使用 Three.js 作為技術的基底框架來設計程式。場景間的切換,我們使用了假場景替換方式的障眼法,當鏡頭位移至設定好的位置時,則敲敲的移動所有物件的 Z 軸,而達到不需要計算過度複雜的鏡頭路徑,只需要移動 + 替換即可。

氛圍加成

為了製作沈浸式,我們覺得增加音效是必須的,所以我們另外設計了物件 Mouse over 的音效,也請藝術家提供了我們現場場景音效,讓體驗更加沉浸。另外做了許多細節的處理,例如移動讀取時的偵探沙漏旋轉特效、滑鼠追蹤 Mask 效果等。

網站設計作品 - 偵探學長頸鹿特效互動網站
C
r
e
d
i
t