Verwendung von Aktionen

1. 1. Die Aktion definieren

Zuerst muss die Aktion definiert werden. Dies geschieht im Array des Schlüssels actions in der Datei items.json. Für eine Viewpoint-Aktion könnte dies wie folgt aussehen:

    "actions": [
        {
            "id": "viewpoint-PotsdamerPlatz",
            "type": "viewpoint",
            "viewpoint": {
                "distance": 533.79,
                "groundPosition": [
                    13.375510, 52.509600, 35.240790
                ],
                "heading": 263.71,
                "pitch": -44.86,
                "roll": 0,
                "animate": true
            }
        }
    ]

Der Wert von "id" muss eine eindeutige Aktions-ID sein, der Wert von "type" ist der Aktionstyp. Alle weiteren Schlüssel sind spezifisch für den jeweiligen Aktionstyp. In diesem Fall ist es der Schlüssel "viewpoint", der die Einstellungen für die Viewpoint-Aktion enthält.

Eine Parameterbeschreibung der Viewpoint-Aktion und anderer verfügbarer Aktionstypen befindet sich unter Aktionsreferenz.

2. 2. Die Aktion verknüpfen

Im nächsten Schritt wird die Aktion mit einem HTML-Element verknüpft. Dies geschieht durch das Hinzufügen von Objekten zum Schlüssel items in der Datei items.json. Es gibt zwei Möglichkeiten, eine Aktion auszulösen: entweder durch ein Scrollen oder durch eine Klick-Interaktion. Die Art der Interaktion wird innerhalb dieser Objekte angegeben. In der Regel werden Scroll-Interaktionen mit div-Elementen verknüpft, Klick-Interaktionen mit button-Elementen.

Um eine Scroll-Interaktion auszulösen, muss das Klassenattribut class="story-content" dem entsprechenden HTML-Element hinzugefügt werden.

Für eine Klick-Interaktion ist erforderlich, dass das anklickbare Element eine ID besitzt.

Die zuvor erstellte Viewpoint-Aktion soll nun als Scroll-Interaktion mit folgendem HTML-Element der index.html verknüpft werden. Da es sich um eine Scroll-Interaktion handelt, muss das div-Element das Klassenattribut "story-content" besitzen.

<div id="demo-viewpoint" class="story-content">
    [..]
</div>

Dafür muss folgendes Objekt zum Items-Array hinzugefügt werden:

"items": [
    {
        "htmlID": "#demo-viewpoint",
        "scrollInteraction": [
            "viewpoint-PotsdamerPlatz"
        ]
    }
]

Der Wert von "htmlID" ist die ID des HTML-Elements, mit dem die Aktion verknüpft werden soll. Der zweite Schlüssel ist entweder "scrollInteraction" oder "clickInteraction" mit einem Array von Aktionen, die ausgeführt werden. Die Reihenfolge im Array entspricht auch der Ausführungsreihenfolge der Aktionen.