PHPackages                             diw/pannellum - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. diw/pannellum

ActiveTypo3-cms-extension[Utility & Helpers](/categories/utility)

diw/pannellum
=============

TYPO3 extension providing a plugin to render 360° panoramas via Pannellum.

1.0.3(2mo ago)0191[1 PRs](https://github.com/mnediw/pannellum/pulls)MITPHPPHP >=8.1

Since Apr 10Pushed 2mo agoCompare

[ Source](https://github.com/mnediw/pannellum)[ Packagist](https://packagist.org/packages/diw/pannellum)[ RSS](/packages/diw-pannellum/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (4)Dependencies (3)Versions (5)Used By (0)

### Pannellum TYPO3 Extension (diw/pannellum)

[](#pannellum-typo3-extension-diwpannellum)

Diese Extension integriert Pannellum (JS 360°/VR Panorama Viewer) in TYPO3 v12/v13. Die Inhalte werden über ein Plugin (Inhaltselement), eigenständige „Scene“-Datensätze und deren Hotspots konfiguriert. Mehrere Panoramen pro Seite werden unterstützt.

---

### Installation

[](#installation)

1. Über Composer installieren (falls nicht bereits vorhanden):

```
composer require diw/pannellum

```

2. Extension im TYPO3-Backend aktivieren (Extension Manager).
3. Datenbank-Upgrade ausführen (Install Tool → Datenbank vergleichen)
4. Caches leeren.

Hinweise

- Pannellum-JS/CSS werden automatisch per CDN über Fluid `f:asset` eingebunden und dedupliziert.
- Falls Sie eine feste Pannellum-Version oder SRI-Hashes wünschen, kann dies in der Template-Integration angepasst werden.

---

### Handbuch für Redakteur:innen

[](#handbuch-für-redakteurinnen)

Die Konfiguration gliedert sich in drei Bausteine, die zusammenspielen:

1. Scene-Datensätze anlegen (Inhalte vorbereiten)

- Legen Sie einen SysOrdner für „Scenes“ an.
- Erstellen Sie dort beliebig viele Datensätze vom Typ „Scene“.
- Pro Scene wählen Sie das Panorama-Bild (FAL-Datei), vergeben einen eindeutigen `identifier` und einen `title`.
- Im Reiter „Hotspots“ fügen Sie nach Bedarf Hotspots hinzu (z. B. Szenenwechsel oder Info-Links).

2. Plugin platzieren und Szenen auswählen

- Fügen Sie das Inhaltselement „Plugins → 360Grad Panorama“ (list\_type: `pannellum_panorama`) ein.
- Reiter „Szenen“: Wählen Sie die gewünschten Scene-Datensätze in der gewünschten Reihenfolge. Die erste ausgewählte Scene wird automatisch als `firstScene` verwendet. Wenn in einer Scene Hotspot-Links zu einer anderen Scene enthalten sind die hier nicht gewählt wurde dann wird der betreffende Hotsot nicht angezeigt.
- Reiter „Defaults“ und „Options“: Pflegen Sie globale Anzeige- und Steuerungsoptionen (siehe unten).
- Am Inhaltselement steht zusätzlich ein FAL-Feld „Vorschaubild“ zur Verfügung

3. Frontend-Ausgabe

- Das Element rendert eine eindeutige Container-ID pro Inhaltselement (mehrere Panoramen pro Seite sind möglich).
- Die Initialisierung erfolgt automatisch, sobald die Pannellum-Bibliothek geladen ist.

---

### Optionen im Detail

[](#optionen-im-detail)

#### Plugin – Reiter „Defaults“

[](#plugin--reiter-defaults)

- sceneFadeDuration (number)
    - Überblenddauer zwischen Szenen in Millisekunden.
- autoLoad (boolean)
    - Lädt das Panorama automatisch beim Laden der Seite.
- autoRotate (number)
    - Startet automatische Rotation mit angegebener Geschwindigkeit (negativ = gegen Uhrzeigersinn).
- author (string)
    - Autor:in, die in der Oberfläche angezeigt wird.
- preview (FAL am Inhaltselement)
    - Vorschau-/Ladebild. Wird nur gesetzt, wenn eine Datei referenziert ist.

Hinweis: `firstScene` ist kein Eingabefeld – es wird automatisch auf die zuerst im Plugin ausgewählte Scene gesetzt.

#### Plugin – Reiter „Options“

[](#plugin--reiter-options)

- authorURL (string)
    - Wenn gesetzt, wird der `author`-Text auf diese URL verlinkt. Wirkt nur, wenn `author` gesetzt ist.
- autoRotateInactivityDelay (number)
    - Verzögerung (ms), nach der nach Nutzeraktivität die Auto-Rotation startet; nur wirksam mit `autoRotate`.
- autoRotateStopDelay (number)
    - Verzögerung (ms), nach der die Auto-Rotation nach dem Laden stoppt; nur wirksam mit `autoRotate`.
- orientationOnByDefault (boolean)
    - Aktiviert die Geräteorientierung beim Laden (falls unterstützt). Standard: false.
- showZoomCtrl (boolean)
    - Blendet Zoom-Steuerung ein/aus. Standard: true.
- keyboardZoom (boolean)
    - Aktiviert/Deaktiviert Zoomen per Tastatur. Standard: true.
- mouseZoom (boolean|string)
    - `true`/`false` oder `fullscreenonly` (nur im Vollbild zoomen). Standard: true.
- draggable (boolean)
    - Aktiviert/Deaktiviert Ziehen per Maus/Touch. Standard: true.
- disableKeyboardCtrl (boolean)
    - Deaktiviert alle Tastatursteuerungen. Standard: false.
- showFullscreenCtrl (boolean)
    - Steuert Anzeige des Vollbild-Buttons (nur bei Browser-Support). Standard: true.
- showControls (boolean)
    - Blendet alle Controls ein/aus. Standard: true.

#### Scene-Datensatz – Allgemeines

[](#scene-datensatz--allgemeines)

- identifier (string)
    - Eindeutiger Schlüssel der Scene; wird in Hotspots referenziert und im JSON als Szenen-ID genutzt.
- title (string)
    - Titel der Scene (für Redaktionszwecke und optional UI).
- type (string)
    - Pannellum-Szenentyp; üblich ist `equirectangular`.
- panorama (FAL-Datei)
    - Das 360°-Panorama-Bild (Dateiauswahl über TYPO3 FAL).
- hotspot\_debug (boolean)
    - Aktiviert die Hotspot-Debug-Anzeige (nur für Entwicklung/Debugging sinnvoll).

#### Scene-Datensatz – Start-/Grenzwerte der Ansicht

[](#scene-datensatz--start-grenzwerte-der-ansicht)

- yaw (number)
    - Start-Yaw (in Grad). Standard: 0.
- pitch (number)
    - Start-Pitch (in Grad). Standard: 0.
- hfov (number)
    - Start-HFOV (Sichtfeld horizontal, in Grad). Standard: 100.
- minYaw / maxYaw (number)
    - Minimaler/Maximaler Yaw der Viewer-Kante (in Grad). Standard: -180 / 180 (kein Limit).
- minPitch / maxPitch (number)
    - Minimaler/Maximaler Pitch der Viewer-Kante (in Grad). Standard: unbegrenzt (Center kann -90/90 erreichen).
- minHfov / maxHfov (number)
    - Minimaler/Maximaler HFOV (in Grad). Standard: 50 / 120.

Leere Felder werden nicht ins JSON geschrieben; Pannellum verwendet dann seine Standardwerte.

#### Hotspots (in der Scene-FlexForm)

[](#hotspots-in-der-scene-flexform)

- pitch (number)
    - Position des Hotspots (Pitch) in Grad.
- yaw (number)
    - Position des Hotspots (Yaw) in Grad.
- type (select: scene | info)
    - „scene“ wechselt zu einer Szene; „info“ verlinkt zu einer URL.
- text (string)
    - Bezeichner/Tooltip des Hotspots.
- sceneId (select)
    - Ziel-Szene (Identifier) für Scene-Hotspots. Auswahl aus vorhandenen Scenes (alphabetisch sortiert).
- url (string)
    - Ziel-URL für Info-Hotspots. Für Scene-Hotspots nicht anwendbar. Ausgabe im JSON-Schlüssel `URL` (Großschreibung gemäß Pannellum).
- targetPitch (number | "same")
    - Ziel-Pitch der Scene in Grad. "same" übernimmt aktuellen Pitch der Ausgangsszene.
- targetYaw (number | "same" | "sameAzimuth")
    - Ziel-Yaw der Scene in Grad. "same" übernimmt aktuellen Yaw; "sameAzimuth" berücksichtigt `northOffset` zur Beibehaltung der Nordausrichtung.
- targetHfov (number | "same")
    - Ziel-HFOV in Grad. "same" übernimmt aktuellen HFOV der Ausgangsszene.

---

### Support / Weiterentwicklung

[](#support--weiterentwicklung)

Fehler gefunden oder Wünsche? Bitte ein Issue im Repository anlegen oder direkt Kontakt aufnehmen.

###  Health Score

38

—

LowBetter than 83% of packages

Maintenance83

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~5 days

Total

4

Last Release

89d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/43402899?v=4)[Martin Neumann](/maintainers/mnediw)[@mnediw](https://github.com/mnediw)

---

Top Contributors

[![neumann-sitegeist](https://avatars.githubusercontent.com/u/115168454?v=4)](https://github.com/neumann-sitegeist "neumann-sitegeist (6 commits)")

### Embed Badge

![Health badge](/badges/diw-pannellum/health.svg)

```
[![Health](https://phpackages.com/badges/diw-pannellum/health.svg)](https://phpackages.com/packages/diw-pannellum)
```

###  Alternatives

[friendsoftypo3/content-blocks

TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML

103519.9k57](/packages/friendsoftypo3-content-blocks)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

611.1M8](/packages/netresearch-rte-ckeditor-image)[pagemachine/typo3-formlog

Form log for TYPO3

23238.6k8](/packages/pagemachine-typo3-formlog)[eliashaeussler/typo3-form-consent

Extension for TYPO3 CMS that adds double opt-in functionality to EXT:form

1595.5k](/packages/eliashaeussler-typo3-form-consent)[yoast-seo-for-typo3/yoast_seo

Yoast SEO for TYPO3

511.7M9](/packages/yoast-seo-for-typo3-yoast-seo)[typo3/cms-seo

TYPO3 CMS SEO - SEO features including specific fields for SEO purposes, rendering of HTML meta tags and sitemaps.

168.9M158](/packages/typo3-cms-seo)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)