簡訊設計
2021.10.08
夥伴聊聊

從 360 度環繞欣賞海洋垃圾—海廢圖鑑開發分享

從 360 度環繞欣賞海洋垃圾—海廢圖鑑開發分享
Hi,我是簡訊設計的前端工程師 Glenn,這次來介紹海廢圖鑑的網站開發,分享在本專案開發實作的心得。
海廢圖鑑是以博物館展覽般的互動,讓使用者能夠仔細欣賞這些來自人類產生的海洋垃圾,可從這裏前往網站:
https://oceantrash.rethinktw.org/

整個網站的主力互動視覺就是這個 360 度的旋轉展示,非常的吸睛!
在開發之前,先想好幾個問題:

1. 如何呈現出立體感
2. 如何透過滑鼠控制旋轉效果
3. 如何處理大量的圖片素材

以下就逐條來實作出這幾個功能囉!


一、呈現出立體感

為了呈現出最原汁原味的海洋廢棄物的樣貌,RE-THINK 強大的攝影團隊產出了大量海廢的 360 度環繞圖,如此一來就能夠透過逐格動畫的方式來呈現出海洋廢棄物的立體感。
rethink-360-1.png

這些環繞圖就像是電影膠卷,依序將這些圖串接之後再逐步播放,就能夠達到用環景觀察海洋廢棄物的視覺體驗。
rethink-360-2.png


二、如何透過滑鼠控制旋轉效果

當瀏覽器進行捲動時會觸發 viewer 的膠卷圖片移動。
當捲軸產生變動時去驅動 handleWatchScroll 這隻程式,透過瀏覽器提供的捲軸進度,來操作目前膠卷應該要出現哪一張圖片影像。
window.addEventListener('scroll', handleWatchScroll);
<div class="viewer">
  <img src="duck.png" />
</div>

viewer 接收到事件後,依照捲軸進度調整內容。
rethink-360-3.gif

window.onscroll = function() {
  const offsetY = window.pageYOffset;
  const totalHeight = document.body.offsetHeight - window.innerHeight;
  const scrollProgress = offsetY / totalHeight;  // 取得目前捲軸進度
 
  const frames = 12;
  const imageWidth = 120;
  const currentFrameIndex = Math.floor(frames * scrollProgress);  // 取得對應的影格
  const translateDistance = imageWidth * currentFrameIndex;  // 取得膠卷要移動的距離
 
  const duckImage = document.querySelector('.viewer img');
  duckImage.style = `transform: translateX(-${translateDistance}px}`; // 移動膠卷
}


三、如何處理大量的圖片素材

海廢圖鑑有高達 100 項的海洋廢棄物,若環繞圖是以 30 度一張,一項海廢就擁有 12 張環繞圖,因此要處理高達 1200 張環繞圖就不太可能使用人工的方式去完成。
因此,我們使用了 ffmpeg 來輔助我們完成這項功能。
ffmpeg 能夠已指定的尺寸與銜接方式將多張圖片結合在一張內,就像是電影膠卷一樣。
// ffmpeg tile=12x1 就能夠將所有圖片合成產出 12x1 的水平排列連環圖
// scale=680:-1 圖片寬度為 680px,-1 為等比縮放
// result.png 為完成後的產出圖檔檔名
ffmpeg -i "%1d.png" -vf "tile=12x1,scale=680:-1" result.png;

值得注意的是,ffmpeg 雖然將圖片很好的銜接起來,但是完成的成果會佔據大量容量,為了減少網站的流量負擔,一定要進行圖片壓縮。
透過 tinyPNG 的幫助,能夠將圖片壓縮到原本的 30%,從肉眼上也不太有明顯的壓縮破壞的痕跡,非常推薦!

以上,是本次海廢圖鑑的簡單心得分享,感謝你的閱讀?
Share to: Facebook / Line
如看展般的網站水平瀏覽體驗—簡訊設計官網程式開發分享