全景相簿 Theta S 360 這是一項特別的作品,由於近幾年全景攝影器材的進步,所以全景影片、全景照片漸漸的流行起來,而最近剛好也入購了 RICOH Theta S 全景攝影機,所以我便實作了一下 360度全景相簿,這作品我特意分成兩個專案,分別是純前端、純後端的角度切入,所以在 GitHub 上會有兩包 code,以下會大略的說明! 由…

全景相簿 Theta S 360

這是一項特別的作品,由於近幾年全景攝影器材的進步,所以全景影片、全景照片漸漸的流行起來,而最近剛好也入購了 RICOH Theta S 全景攝影機,所以我便實作了一下 360度全景相簿,這作品我特意分成兩個專案,分別是純前端、純後端的角度切入,所以在 GitHub 上會有兩包 code,以下會大略的說明!

由於 RICOH Theta S 360 全景相機具備兩鏡頭,所以可以產出一張由兩顆鏡頭組成的 360 度的相片,照片是以水平呈現,所以瀏覽起來效果不佳。目前據我所知 RICOH Theta S 官網也有提供上傳瀏覽 360 度相片播放器 的功能,但當時官網的播放器是使用 Flash 來呈現的(目前好像改成使用 Canvas),身為前端工程師的我,當然立馬想使用 JavaScript 去實作 360 度全景相片播放器!

由於 RICOH Theta S 360 全景相機具備兩鏡頭,所以可以產出一張由兩顆鏡頭組成的 360度的相片,照片是以水平呈現

使用 360 度全景相片播放器呈現的方式,此方式對於瀏覽操作流程上較為方便與美觀

前端

既然要在網頁前端呈現球狀的方式,那就利用一些 library 實作,專案內我參考了 theta-viewer.js,細看 theta-viewer.js 的內容可以發現裡面有著三個主要物件,分別是 async.jsthree.jsOrbitControls.js,而我只是將它進一步的使用與改造而已,例如: 可以取得轉向後的座標存進資料庫.. 等。還有一項功能較為特殊,主要是利用 JavaScript 的 document.execCommand 來執行觸發剪貼簿的功能,用 JavaScript 直接將複製的網址存入剪貼簿內,如此一來就不用再按滑鼠右鍵。

Theta S 本身有 GPS 內建定位功能,所以在上傳時候可以使用 php 去讀取 exif 的經緯度資料,並一起新增於資料庫內,前端輸出再搭配 Google Maps 即可做出此相簿地圖的功能

此功能較為特殊,主要利用 JavaScript 的 document.execCommand 來執行觸發剪貼簿的功能,用 JavaScript 直接將複製的網址存入剪貼簿內,如此一來就不用再按滑鼠右鍵

後端

其框架使用個人的 framework OACI,也就是 OA's CodeIgniter 實作,功能主要就是 登入上傳縮圖,比較特別的是因為 360 圖檔較大,所以這次也使用 AWS S3 作為儲存空間!登入(目前尚未開放註冊)後,即可使用上傳功能將 360 度相片上傳,網頁是 RWD 設計,所以在上傳 360 度相片的流程上也不會是問題。登入後還可瀏覽尚未公開的 360 度相片,雖然未公開,但使用者可以將網址分享給朋友,由於網址 token 使用 MD5 編碼過,所以只有知道網址的人才可以瀏覽。Theta S 本身有 GPS 內建定位功能,所以在上傳時候可以使用 php 去讀取 exif 的經緯度資料,並一起新增於資料庫內,前端輸出再搭配 Google Maps 即可做出此相簿地圖的功能。

登入(目前尚未開放註冊)後,即可使用上傳功能,將 360 度相片上傳

由於網頁也製作成手機相容的 RWD 設計,所以在上傳 360 度相片的流程上也不會是問題

登入後可以瀏覽尚未公開的 360 度相片,雖然未公開,但使用者可以將網址分享給朋友,由於網址 token 使用 MD5 編碼過,所以只有知道該照片網址的人才可以瀏覽

壓縮圖檔

主要是因為檔案大怕前端傳輸太久,所以這次加入 TinyPNG 作為壓縮圖片的方式,以減少圖片大小,提升傳輸速度以及成本,原本用 https://compressor.io/ 但是處理時間花太久了,所以就先不慘用。

這作品我故意分成兩個架構實作,在 GitHub 上分別是 360ThetaS 兩包專案,基本上 360 是一包前後端寫在一起的專案,而 ThetaS 則是純前端的架構,ThetaS 藉由 360 專案提供的 api 所實作的網站,而 360 則是架設在 AWS EC2 上面,ThetaS 則是架構在 GitHub.io 的服務上,會這樣拆開的原因主要是因為想練習前後端分離的架構模式,另一方面則是藉由 GitHub.io 的服務減低 AWS EC2 的負擔。

※ 因系統維護關係,所以目前已暫時先將後端 Demo 網址關閉囉,請大家先參考 GitHub 的原始碼吧!

相關參考

宙思設計 - OA Wu's Blog
宙思設計
宙思設計 宙思設計團隊,是一家服務廣泛,凡舉網頁、平面、包裝、印刷及攝影皆可製作的設計公司。也是我長期配合的接案公司,我多數都是承接宙思的前端切版、JavaScript 功能、後端 php 上稿、套版、系統架設的部分,而宙思設計主要著力於“設計”的產出,如果各位有相關需求其實可以與其洽詢! 關於宙思設計官網的架設開發…
VG 鉅臣 - OA Wu's Blog
VG 鉅臣
VG 鉅臣 這是一個前端技術的外包案實作,其網站名稱為 VG 鉅臣,此專案主要負責前端刻板部份,版型設計則由宙思設計所製作。 此專案為純前端的實作,有鑒於網站架構的特性,於是將網頁命名以中文顯示,一方面增強 SEO,另一方面方便素材人員配合更換素材(命名規則)。而網站前台可以發現都有固定幾項規則,所以就使用 jQuer…
嘉豪光學 - OA Wu's Blog
嘉豪光學
嘉豪光學 這是一個前、後端技術的外包案實作,其網站名稱為嘉豪光學,嘉豪光學有限公司為多國外知名品牌之總代理。於2007成立至今,憑著經營團隊專業的知識領域和熱誠的服務態度,產品銷售已涵蓋全台眼鏡商圈。 專案為宙思設計的網站專案,專案除了設計與聯絡外,從前端刻板、後端資料庫、系統架設皆是獨立完成。網站框架…
瀏覽器 Console 上畫 QR Code - OA Wu's Blog
瀏覽器 Console 上畫 QR Code
瀏覽器 Console 上畫 QR Code 來用瀏覽器除錯器畫一個屬於個人的彩蛋吧!使用瀏覽器 Console.log 的功能,再利用 CSS 語法調整樣式,製作有趣的個人彩蛋,本次使用 QRCode 當作實作範例,大家也可以改成自己的喲!Painting QR Code on the browser Console. 這是個無聊靈機一動的小作!大家應該都有打開 Facebook 網頁的 C…
吳政賢個人簡歷OA WuLiveCoding.tw
OA Wu's Blog
開發心得
全景相簿 Theta S 360