首頁 資訊 Three.js制作360度全景圖

Three.js制作360度全景圖

來源：泰然健康網(wǎng) 時間：2024年12月28日 19:44

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

var PSV = new PhotoSphereViewer({ // 全景圖的完整路徑 panorama: 'images/360img03.jpg', // 放全景圖的元素 container: div })

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

<!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"> <!-- 隱藏狀態(tài)欄或者設(shè)置狀態(tài)欄的顏色--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 禁止緩存訪問頁面--> <meta http-equiv="Pragma" content="no-cache"> <meta name="applicable-device" content="mobile"> <!-- 頁面關(guān)鍵詞--> <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">旋轉(zhuǎn)查看效果</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. */ //必須在服務(wù)器上才能看到效果！ 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'; } //全景圖參數(shù)配置函數(shù) function loadingAllImg(){ var div = document.getElementById('container'); var PSV = new PhotoSphereViewer({ // 全景圖的完整路徑 panorama: 'images/360img03.jpg', // 放全景圖的元素 container: div, // 可選，默認(rèn)值為2000，全景圖在time_anim毫秒后會自動進行動畫。（設(shè)置為false禁用它） time_anim: false, // 可選值，默認(rèn)為false。顯示導(dǎo)航條。 navbar: true, // 可選，默認(rèn)值null，全景圖容器的最終尺寸。例如：{width: 500, height: 300}。 size: { width: '100%', height: canvasHeight } }); }

相關(guān)知識

背景高清圖片
葆嬰最新獎金制度
360度環(huán)形吸脂
冰塊背景
健康背景
減肥顧問24小時360度全方位服務(wù)
康比特左旋360度膠囊怎么樣
360健康www.360jk.com
日式拉面背景
360左旋肉堿副作用

網(wǎng)址: Three.js制作360度全景圖 http://m.u1s5d6.cn/newsview882864.html

推薦資訊