基於Three.js的360X180度全景圖預覽插件

基於Three.js的360X180度全景圖預覽插件

時間 2015-08-12 10:01:10  HTML5中國

原文   http://www.html5cn.org/article-8621-1.html

主題  Three.js

簡要教程 Photo Sphere Viewer是一款基於Three.js的360X180度全景圖預覽js插件。該js插件能夠360度旋轉查看全景圖，也能夠上下180度查看圖片。使用該插件的惟一要求是瀏覽器支持canvas或WebGL。

查看演示       下載插件

使用方法

使用該全景圖插件時要引入three.min.js和photo-sphere-viewer.min.js文件。

1. <script src="js/three.min.js"></script>
2. <script src="js/photo-sphere-viewer.min.js"></script>        

複製代碼

HTML結構

能夠建立一個空的<div> 來放置全景圖，經過CSS來設置它的尺寸。

1. <div id="container"></div>        

複製代碼

初始化插件

要初始化該全景圖插件，能夠建立一個新的PhotoSphereViewer對象，而後在這個對象中插入一個參數對象，有兩個參數是必須設置的：

1. var PSV = new PhotoSphereViewer({
2.     // Path to the panorama
3.     panorama: '1.jpg',
5.     // Container
6.     container: div
7. });      

複製代碼

配置參數

下面是該全景圖插件的全部可用配置參數： 

• panorama：必填參數，全景圖的路徑。
• container：必填參數，放置全景圖的div元素。
• autoload：可選，默認值爲true，true爲自動調用全景圖，false爲在後面加載全景圖(經過.load()方法)。
• us empdata：可選，默認值爲true，若是Photo Sphere Viewer必須讀入XMP數據則爲true。
• default_position：可選，默認值爲{}，定義默認的位置，及用戶看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。
• min_fov：可選，默認值爲30，觀察的最小區域，單位degrees，在1-179之間。
• max_fov：可選，默認值爲90，觀察的最大區域，單位degrees，在1-179之間。
• allow_user_interactions：可選，默認值爲true，設置爲false則禁止用戶和全景圖交互(導航條不可用)。
• tilt_up_max：可選，默認值爲Math.PI/2，向上傾斜的最大角度，單位radians。
• tilt_down_max：可選，默認值爲Math.PI/2，向下傾斜的最大角度，單位radians。
• zoom_level：可選，默認值爲0，默認的縮放級別，值在0-100之間。
• long_offset：可選，默認值爲PI/360，mouse/touch移動時每像素通過的經度值。
• lat_offset：可選，默認值爲PI/180，mouse/touch移動時每像素通過的緯度值。
• time_anim：可選，默認值爲2000，全景圖在time_anim毫秒後會自動進行動畫。(設置爲false禁用它)
• theta_offset：過期的選項，可選，默認值爲1440，自動動畫時水平方向的速度。
• anim_speed：可選，默認值爲2rpm，動畫的速度，每秒/分鐘多少radians/degrees/revolutions。
• navbar：可選值，默認爲false。顯示導航條。
• navbar_style：可選值，默認爲{}。導航條的自定義樣式。下面是可用的樣式列表：
• backgroundColor：導航條的背景顏色，默認值爲rgba(61, 61, 61, 0.5)。
• buttonsColor：按鈕的前景顏色，默認值爲transparent。
• activeButtonsBackgroundColor：按鈕激活狀態的背景顏色，默認值爲rgba(255, 255, 255, 0.1)。
• buttonsHeight：按鈕的高度，單位像素，默認值爲20。
• autorotateThickness：autorotate圖標的厚度，單位像素，默認值爲1。
• zoomRangeWidth：縮放的範圍，單位顯示，默認值50。
• zoomRangeThickness：縮放的範圍的厚度，單位像素，默認值1。
• zoomRangeDisk：縮放範圍的圓盤直徑，單位像素，默認值爲7。
• fullscreenRatio：全屏圖標的比例，默認值爲3/4。
• fullscreenThickness：全屏圖標的厚度，單位像素，默認值爲2。
• loading_msg：可選，默認值爲Loading…，圖片加載時的提示文字。
• loading_img：可選，默認值爲null，在加載時顯示的圖片的路徑。
• size：可選，默認值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。
• onready：可選值，默認值爲null。當全景圖準備就緒而且第一張圖片顯示時的回調函數。

若是你喜歡這個插件，那麼你可能也喜歡: