當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Three.js制作360度全景图

發(fā)布時間：2023/12/2 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Three.js制作360度全景图小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這是個基于three.js的插件，預覽地址：戳這里

使用方法：

1、這個插件的用法很簡單，引入如下2個js

2、初始化一下，(具體各種參數(shù)配置根據(jù)情況而定)

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

配置參數(shù)

下面是該全景圖插件的所有可用配置參數(shù)：

panorama：必填參數(shù)，全景圖的路徑。 container：必填參數(shù)，放置全景圖的div元素。 autoload：可選，默認值為true，true為自動調(diào)用全景圖，false為在后面加載全景圖（通過.load()方法）。 usexmpdata：可選，默認值為true，如果Photo Sphere Viewer必須讀入XMP數(shù)據(jù)則為true。 default_position：可選，默認值為{}，定義默認的位置，及用戶看見的第一個點，例如：{long: Math.PI, lat: Math.PI/2}。 min_fov：可選，默認值為30，觀察的最小區(qū)域，單位degrees，在1-179之間。 max_fov：可選，默認值為90，觀察的最大區(qū)域，單位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移動時每像素經(jīng)過的經(jīng)度值。 lat_offset：可選，默認值為PI/180，mouse/touch移動時每像素經(jīng)過的緯度值。 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：按鈕激活狀態(tài)的背景顏色，默認值為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。當全景圖準備就緒并且第一張圖片顯示時的回調(diào)函數(shù)。

?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"><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> </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'; } //全景圖參數(shù)配置函數(shù) 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），也能找到！目前這個插件感覺還不是很完善。

提示：轉自http://resource.haorooms.com/softshow-29-167-1.html

更多專業(yè)前端知識，請上【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的Three.js制作360度全景图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

js
全景图