之前寫過一篇使用手機上傳 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 照片網頁啦。
如果使用上有遇到什麼問題或建議,可以前往專案網頁回報。