基於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。當全景圖准備就緒並且第一張圖片顯示時的回調函數。

如果你喜歡這個插件，那么你可能也喜歡: