這是個基於three.js的插件,預覽地址:戳這裡
使用方法:
1、這個插件的用法很簡單,引入如下2個js
<script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script>
2、初始化一下,(具體各種參數配置根據情況而定)
var PSV = new PhotoSphereViewer({ // 全景圖的完整路徑 panorama: 'images/360img03.jpg', // 放全景圖的元素 container: div })
配置參數
下面是該全景圖插件的所有可用配置參數:
panorama:必填參數,全景圖的路徑。
container:必填參數,放置全景圖的div元素。
autoload:可選,默認值為true,true為自動調用全景圖,false為在後面加載全景圖(通過.load()方法)。
usexmpdata:可選,默認值為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。當全景圖准備就緒並且第一張圖片顯示時的回調函數。
3、上面demo的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360全景圖</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <!-- 啟用webAPP全屏模式--> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隱藏狀態欄或者設置狀態欄的顏色--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 禁止緩存訪問頁面--> <meta http-equiv="Pragma" content="no-cache"> <meta name="applicable-device" content="mobile"> <!-- 頁面關鍵詞--> <link rel="stylesheet" href="css/demo01.css"> <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> <!----> <script src="js/demo01.js"></script> <!--[if IE]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <body> <div class="main"> <h3 id="title">旋轉查看效果</h3> <div id="container"></div> </div> </body> </html> *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; text-decoration: none; border: 0; outline: 0; } .main{ max-width: 640px; width: 100%; margin: 0 auto; } .main h3{ text-align: center; padding: 10px 0; } /** * Created by Administrator on 2016/11/29. */ //必須在服務器上才能看到效果! window.onload=function(){ getTitleHeight(); loadingAllImg(); } //讓全景圖剛好撐滿屏幕 var canvasHeight; function getTitleHeight(){ var title=document.getElementById('title'); var titleHeight=parseFloat(getComputedStyle(title).height); var maxHeight=window.innerHeight; canvasHeight=parseFloat(maxHeight-titleHeight)+'px'; } //全景圖參數配置函數 function loadingAllImg(){ var div = document.getElementById('container'); var PSV = new PhotoSphereViewer({ // 全景圖的完整路徑 panorama: 'images/360img03.jpg', // 放全景圖的元素 container: div, // 可選,默認值為2000,全景圖在time_anim毫秒後會自動進行動畫。(設置為false禁用它) time_anim: false, // 可選值,默認為false。顯示導航條。 navbar: true, // 可選,默認值null,全景圖容器的最終尺寸。例如:{width: 500, height: 300}。 size: { width: '100%', height: canvasHeight } }); }
同時,在github上面,大家搜索(Photo Sphere Viewer),也能找到!目前這個插件感覺還不是很完善。
以上所述是小編給大家介紹的Three.js制作360度全景圖,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!