Erstellen Sie ein 360-Grad-Panorama basierend auf dem Three.js-Plug-in

Dies ist ein Plug-in, das auf three.js basiert, Vorschauadresse: Klicken Sie hier

Verwendung:

1 Die Verwendung dieses Plug-ins ist sehr einfach, stellen Sie Folgendes vor 2 js

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

2. Initialisieren (die spezifische Parameterkonfiguration hängt von der Situation ab)

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

Konfigurationsparameter

Im Folgenden sind alle verfügbaren Konfigurationsparameter aufgeführt Panorama-Plugin:

Panorama: erforderlicher Parameter, der Pfad des Panoramas.
container: erforderlicher Parameter, das div-Element, in dem das Panorama platziert wird.
Autoload: optional, der Standardwert ist true, true bedeutet, dass das Panorama automatisch aufgerufen wird, false bedeutet, dass das Panorama später geladen wird (über die Methode .load()).
usexmpdata: optional, Standardwert ist true, true, wenn Photo Sphere Viewer XMP-Daten lesen muss.
default_position: Optional, der Standardwert ist {} und definiert die Standardposition und den ersten vom Benutzer gesehenen Punkt, zum Beispiel: {long: Math.PI, lat: Math.PI/2}.
min_fov: optional, der Standardwert ist 30, der minimale Beobachtungsbereich, Einheit Grad, zwischen 1-179.
max_fov: optional, der Standardwert ist 90, der maximale Beobachtungsbereich in Grad zwischen 1 und 179.
allow_user_interactions: Optional, der Standardwert ist true. Wenn Sie ihn auf false setzen, können Benutzer nicht mit dem Panorama interagieren (die Navigationsleiste ist nicht verfügbar).
tilt_up_max: Optional, der Standardwert ist Math.PI/2, der maximale Winkel der Aufwärtsneigung im Bogenmaß.
tilt_down_max: Optional, der Standardwert ist Math.PI/2, der maximale Winkel der Abwärtsneigung im Bogenmaß.
zoom_level: Optional, der Standardwert ist 0, der Standardzoomlevel liegt zwischen 0 und 100.
long_offset: Optional, der Standardwert ist PI/360, der Längengradwert jedes Pixels, wenn sich die Maus/Berührung bewegt.
lat_offset: optional, der Standardwert ist PI/180, der Breitengradwert jedes Pixels, wenn sich die Maus/Berührung bewegt.
time_anim: optional, der Standardwert ist 2000, das Panorama wird nach time_anim Millisekunden automatisch animiert. (Auf „false“ setzen, um es zu deaktivieren)
theta_offset: Veraltete Option, optional, Standardwert ist 1440, die horizontale Geschwindigkeit bei automatischer Animation.
anim_speed: Optional, der Standardwert ist 2 U/min, die Geschwindigkeit der Animation, wie viele Bogenmaß/Grad/Umdrehungen pro Sekunde/Minute.
navbar: Optionaler Wert, Standardwert ist false. Navigationsleiste anzeigen.
navbar_style: Optionaler Wert, Standard ist {}. Benutzerdefinierter Stil für die Navigationsleiste. Das Folgende ist eine Liste der verfügbaren Stile:
backgroundColor: die Hintergrundfarbe der Navigationsleiste, der Standardwert ist rgba(61, 61, 61, 0,5).
buttonsColor: die Vordergrundfarbe der Schaltfläche, der Standardwert ist transparent.
activeButtonsBackgroundColor: Die Hintergrundfarbe des Schaltflächenaktivierungsstatus. Der Standardwert ist rgba(255, 255, 255, 0,1).
buttonsHeight: Die Höhe der Schaltfläche in Pixel, der Standardwert ist 20.
AutorotateThickness: Die Dicke des Autorotate-Symbols in Pixel. Der Standardwert ist 1.
zoomRangeWidth: Zoombereich, Einheitenanzeige, Standardwert 50.
zoomRangeThickness: Die Dicke des Zoombereichs, Einheit Pixel, Standardwert 1.
zoomRangeDisk: Der Scheibendurchmesser des Zoombereichs in Pixel, der Standardwert ist 7.
fullscreenRatio: Das Verhältnis des Vollbildsymbols, der Standardwert ist 3/4.
fullscreenThickness: Die Dicke des Vollbildsymbols in Pixel. Der Standardwert ist 2.
loading_msg: optional, der Standardwert ist Loading..., der Eingabeaufforderungstext, wenn das Bild geladen wird.
loading_img: Optional, der Standardwert ist null, der Pfad des Bildes, das beim Laden angezeigt wird.
Größe: optional, Standardwert ist null, die endgültige Größe des Panoramacontainers. Beispiel: {Breite: 500, Höhe: 300}.
onready: optionaler Wert, Standardwert ist null. Rückruffunktion, wenn das Panorama fertig ist und das erste Bild angezeigt wird.

3. Der obige Democode

<!DOCTYPE html>
<html>
<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">
&lt;script src=&quot;js/three.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/photo-sphere-viewer.min.js&quot;&gt;&lt;/script&gt;
<!---->
<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>
<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
}
});
}