Heim Web-Frontend js-Tutorial Erstellen Sie ein 360-Grad-Panorama basierend auf dem Three.js-Plug-in

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

Dec 03, 2016 pm 03:05 PM

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>
Nach dem Login kopieren

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

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

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
}
});
}
Nach dem Login kopieren


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Ersetzen Sie Stringzeichen in JavaScript

JQuery überprüfen, ob das Datum gültig ist JQuery überprüfen, ob das Datum gültig ist Mar 01, 2025 am 08:51 AM

JQuery überprüfen, ob das Datum gültig ist

JQuery Get Element Polsterung/Rand JQuery Get Element Polsterung/Rand Mar 01, 2025 am 08:53 AM

JQuery Get Element Polsterung/Rand

10 JQuery Accords Registerkarten 10 JQuery Accords Registerkarten Mar 01, 2025 am 01:34 AM

10 JQuery Accords Registerkarten

10 lohnt 10 lohnt Mar 01, 2025 am 01:29 AM

10 lohnt

HTTP-Debugging mit Knoten und HTTP-Konsole HTTP-Debugging mit Knoten und HTTP-Konsole Mar 01, 2025 am 01:37 AM

HTTP-Debugging mit Knoten und HTTP-Konsole

JQuery fügen Sie Scrollbar zu Div hinzu JQuery fügen Sie Scrollbar zu Div hinzu Mar 01, 2025 am 01:30 AM

JQuery fügen Sie Scrollbar zu Div hinzu

Benutzerdefinierte Google -Search -API -Setup -Tutorial Benutzerdefinierte Google -Search -API -Setup -Tutorial Mar 04, 2025 am 01:06 AM

Benutzerdefinierte Google -Search -API -Setup -Tutorial

See all articles