Pannellum je besplatna i laka za upotrebu JavaScript biblioteka za kreiranje interaktivnih virtuelnih tura i panoramskih prezentacija u pregledaču, bez potrebe za dodatnim plugin-ovima. Funkcioniše sa HTML5, što omogućava široku kompatibilnost sa modernim pregledačima.
Evo kako možeš izraditi virtuelnu prezentaciju u Pannellum-u:
1. Priprema Panoramskih Fotografija
Prvo ti je potrebna equirektangulska panoramska slika (format od 360° x 180°), obično u JPEG ili PNG formatu. Slike moraju biti pravilno formatirane kako bi izgledale dobro u panoramskom prikazu.
2. Postavljanje Osnovnog HTML Fajla
Napravi osnovni HTML fajl u kojem ćeš integrisati Pannellum.
Primer HTML strukture:
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Virtuelna Prezentacija</title>
<!-- Dodavanje Pannellum CSS i JavaScript -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
/* Stil za panoramski prikaz */
#panorama {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<!-- Kontejner za panoramski prikaz -->
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "images/panorama.jpg", // Putanja do tvoje slike
"autoLoad": true, // Automatsko učitavanje slike
"compass": true, // Prikazuje kompas
"title": "Virtuelna prezentacija",
"author": "Tvoje ime",
"yaw": 180, // Početna orijentacija
"hfov": 110 // Horizontalno vidno polje
});
</script>
</body>
</html>
3. Objašnjenje Koda
- Pannellum CSS i JS: Dodaješ Pannellum biblioteke direktno preko CDN-a.
- Div Kontejner:
<div id="panorama"></div>je mesto gde se renderuje virtuelna prezentacija. - Konfiguracija:
type: Vrsta panorame, obično equirectangular za slike od 360°.panorama: Putanja do panoramske slike.autoLoad: Automatski učitava panoramu.yaw: Početni ugao orijentacije.hfov: Horizontalni ugao vidnog polja.
4. Dodavanje Hotspot-ova
Hotspot-ovi su interaktivni elementi u tvojoj panorami, poput linkova ili informativnih tačaka.
Primer sa hotspot-om:
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "images/panorama.jpg",
"autoLoad": true,
"hotSpots": [
{
"pitch": 10, // Vertikalna pozicija
"yaw": 150, // Horizontalna pozicija
"type": "info",
"text": "Ovo je informativni hotspot!",
"URL": "https://example.com" // Link ka eksternom sadržaju
}
]
});
pitchiyawodređuju gde će se hotspot pojaviti.typemože biti:- info – prikazuje tekst.
- scene – prebacuje na drugu scenu.
- URL – otvara link ka spoljnjem sadržaju.
5. Kreiranje Više Scena (Virtuelna Tura)
Ako imaš više panorama, možeš napraviti turu sa prebacivanjem između scena.
Primer:
pannellum.viewer('panorama', {
"default": {
"firstScene": "scena1",
"sceneFadeDuration": 1000
},
"scenes": {
"scena1": {
"type": "equirectangular",
"panorama": "images/scena1.jpg",
"hotSpots": [
{
"pitch": 0,
"yaw": 90,
"type": "scene",
"text": "Idi u Scenu 2",
"sceneId": "scena2"
}
]
},
"scena2": {
"type": "equirectangular",
"panorama": "images/scena2.jpg",
"hotSpots": [
{
"pitch": 0,
"yaw": -90,
"type": "scene",
"text": "Vrati se u Scenu 1",
"sceneId": "scena1"
}
]
}
}
});
Objašnjenje:
scenes: Objekat sa više scena.firstScene: Početna scena.hotSpots: Hotspot za prebacivanje između scena koristitype: "scene".
6. Hostovanje Projekta
Za lokalno testiranje možeš koristiti:
python3 -m http.server 8080
Otvaranjem localhost:8080 u pregledaču možeš pregledati prezentaciju.
Za produkciju hostuj fajlove na nekom web serveru (npr. Apache, Nginx).
Zaključak
Pannellum je odličan za izradu interaktivnih virtuelnih prezentacija zahvaljujući svojoj jednostavnosti i mogućnosti dodavanja hotspot-ova i višestrukih scena. Koristiš obične panoramske slike i lako konfigurišeš prezentaciju putem JavaScript-a.
Za detaljnija objašnjenja posetite sajt Pannellium-a
Pannellum is developed on GitHub by Matthew Petroff.