Skip to main content

360照片網頁產生器

· 2 min read
From Dubai Airport (The image is dragable to change view 可以拖曳照片來改變視角喔)

之前寫過一篇使用手機上傳 360 圖片到 Facebook,但其實要分享 360 照片1的話,我們也可以用aframe自己弄個網頁來分享。

將照片放在自己空間的缺點是所有工作得自己來。我用yeoman寫了個的 360 照片網頁產生器generator-360-photo,可以用來產生如上的 360 照片網頁 (照片與照片網頁都放在 github page,透過 iframe 嵌入),簡化了自己弄網頁來分享 360 照片的難度。

generator-360-photo在產生展示 360 照片網頁的同時,也對照片做優化。由於嵌入到 600x400 空間的圖檔解析度不需要太大,原本圖檔大小 5.6MB,解析度 5660x2830,優化為解析度 2048x1024 的圖檔後,大小只剩下 481KB。下載時間只需要原來的 1/11。

使用前需要使用 npm 安裝 yeoman 和 generator-360-photo

npm install -g yo
npm install -g generator-360-photo

generator-360-photo 用到sharp來最佳化照片,如果在 Ubuntu linux 或 windows bash 環境下,需要使用

apt install build-essential

命令安裝必要的編譯工具。

安裝後切換到放照片的資料夾,就可以使用

yo 360-photo

命令來建立 360 照片網頁啦。

如果使用上有遇到什麼問題或建議,可以前往專案網頁回報。