The Construction of an Ideal City (akaswap)

First three.js project published on akaswap
https://www.akaswap.com/akaobj/9550

《理想城市的建構 The Construction of an Ideal City》 NFT特別版 (2022)
作品上架akaswap連結:https://www.akaswap.com/akaobj/9550https://www.akaswap.com/akaobj/9688

《理想城市的建構》原作於2021年年底於《異態·共頻》個展於師大藝廊初次展出(圖一、圖二),今年9月中起將於文化部文化資產園區(台中)展出。原作結合海廢雕塑裝置與電子控制,在展場可以體驗兩種不同視覺形式的切換。

圖一 《理想城市的建構》展示於師大德群藝廊 (2021.07)
圖二 《理想城市的建構》展示於師大德群藝廊 (2021.07)

今天針對投影的視覺,用Three.js改寫了一個NFT特別版。因為沒有像先前實體展示時有與海廢實體雕塑對應的需求,就沒有用像之前那般繽紛的色彩呈現。我改用UnrealBloomPass.js做出城市背光在光暈中飄浮的景象(圖三)。也透過OrbitControls.js,讓觀眾可以透過滑鼠或觸控螢幕互動式觀賞。

圖三《理想城市的建構》NFT動態截圖

因為上架akaswap的作品不能包含外部的連結,否則未來連結失效時NFT作品也將出現問題。因此,作品資料夾裡需要包含所有的參照檔案。這包含:

1.將所有引用的js檔案(EffectComposer.js、GLTFLoader.js、RenderPass.js…等),都擺放進local directory。

2.依據擺放路徑,把所有js檔裡面編碼相互參照的路徑也都設置好,最後再一併壓縮為.zip。

本作情境聲音用SonicPi編寫。

透過家祥老師的提點,運用html的audio標籤的方式處理聲音的播放,也就是在body中加上<audio id=”media” src=”……mp3″>的方式,然後在sketch.js透過 document.getElementById(“media”);的方式調用聲音檔、以及document.addEventListener(“click”, function() { }來偵測觀眾的點擊,就可解決原本chrome需要user action才能播放聲音的規定。同時解決在ipad、iphone OS系統中網頁無法播放聲音的問題,讓本作順利可以在PC、Mac、iPad、Android、iPhone(MacOS)…等跨平台瀏覽器完整播放。