Three.js制作360度全景图
生活随笔
收集整理的這篇文章主要介紹了
Three.js制作360度全景图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是個基于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），也能找到！目前這個插件感覺還不是很完善。
提示：轉自http://resource.haorooms.com/softshow-29-167-1.html
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的Three.js制作360度全景图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我所知道的前端组件化与模块化
- 下一篇： 如何使用github搭建个人博客