DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於Three.js插件制作360度全景圖
基於Three.js插件制作360度全景圖
編輯:關於JavaScript     

這是個基於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度全景圖,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved