Javascript, 網頁設計

jQuery教學-仿RICOH THETA 360度全景圖顯示外掛

梅干 2017/06/22
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
  自從RICOH推出360度的相機,讓照片的趣味性變更高,且拍攝更簡易,只需按下快門,就能補捉360度的全景照片,讓照片的視野比眼睛還更寬廣,因此比魚眼來的更有趣,同時再搭配相機內建的軟體,就能將全景的照片,變成小星球或上下左右的滑動觀看,以及放大縮小,讓在一張照片中,可同時看到所有的角度,甚至放大看細節,但這麼酷的影像,只能在他的應用程式中呈現。
  由於360度的全景照片,趣味性相當的高,因此各家廠商紛紛的推出360相機,就連社群龍頭臉書也將360全景照,下放到個人的塗鴨牆中,讓大家都可以將360相機拍攝的照片,與自己的親朋好友分享,而最近朋友問到,是否能將這功能,放到一般的網頁中,答案當然是可以的,因此梅干也上網找了幾款的jQuery 360度全景外掛,發現有一款與RICOH的極像,除了可上下左右滾動瀏覽外,還可放大縮小,更酷的是設定上相當的簡易,因此對於360全景感興趣的朋友,現在也一塊來看看這隻套件要怎用吧!
RICOH THETA
套件名稱:RICOH THETA
套件下載:https://github.com/akokubo/ThetaViewer

Step1
進到外掛的頁面後,點右上角的綠色鈕,再點「Download ZIP」鈕,就可將套件下載回來。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step2
接著在下方,有作者提示的相關應用的範例頁面,其實這隻外掛使用很簡單,先把所有的js載入後,接著再從creatThetaViewer()中,輸入360全景圖片相對路徑。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step3
下載完畢,解縮就會看到許多的資料夾。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step4
接著將資料夾中的所有js檔,集中到examples/js資料夾中。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step5
再利用360相機拍一張全景的照片,建議尺寸約3500像素左右。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step6
完成後,按住滑鼠左鍵,就可左右拖曳,改變視野,甚至用手機也沒問題。
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
Step7
當滾動滑鼠中鍵,也可zoom in zoom out喔!真的很簡單又方便喔!
梅問題-jQuery教學-仿RICOH THETA 360度全景圖顯示外掛
[範例預覽]