Einbindung von Sounds mit three.js

Mithilfe von Three.JS lassen sich Audio-Dateien sehr einfach in unser Spiel einbinden. Obwohl in der Dokumentation zum Thema Audio nur die Klasse AudioLoader beschrieben wird, sind viele weitere Teile der Audio-Umgebung bereits implementiert und können eingesetzt werden.

Audio-Umgebung erstellen

Die Unterstützung von Audio-Dateien in Three.JS basiert auf der Web Audio API, welche im nächsten Kapitel genauer erklärt wird. So wie Three.JS ein Framework für WebGL ist, ist es hier auch gleichzeitig ein Framework für die Web Audio API. Three.JS übernimmt dabei viele grundlegende Konfigurationen für die Web Audio API, wodurch die Einrichtung bereits mit wenigen Methodenaufrufen abgeschlossen ist.

Die einzelnen Schritte:

Zunächst wird ein AudioListener angelegt, welcher anschließend der Camera angehängt wird. Durch diese Verknüpfung wird die Positionierung von 3D-Sound-Objekten erleichtert, welche im weiteren Verlauf noch genauer erläutert wird.

var audioListener = new THREE.AudioListener();
camera.add(audioListener);

Um überhaupt Audio-Dateien laden zu können, wird ein AudioLoader benötigt.

var audioLoader = new THREE.AudioLoader();

Nun folgt schon der wichtigste Teil der Implementierung, denn jetzt muss für jede Audio-Datei ein Sound-Objekt erzeugt werden. Um Redundanz im Code zu vermeiden, wurde dafür die Methode createSound() erstellt, welche genau diese Aufgabe übernimmt und ein Sound-Objekt zurück gibt.

Hier sei vorab erwähnt, dass diese Methode nur Objekte für statische Sounds erzeugt. Für 3D-Sounds gibt es eine eigene Methode, in welcher noch diverse weitere Eigenschaften gesetzt werden. Da der Aufbau der createPositionalSound()-Methode jedoch prinzipiell gleich ist, ist eine Erklärung an dieser Stelle nicht notwendig.

function createSound(filename, loop, volume, complete) {
    var sound = new THREE.Audio(audioListener);
    audioLoader.load('sounds/' + filename + '.mp3', function(buffer) {
        sound.setBuffer(buffer);
        sound.setLoop(loop);
        sound.setVolume(volume);
        if (complete) {
            complete();
        }
    });
    return sound;
}

Diese Methode wird bei der Initialisierung der Audio-Umgebung mit initAudio() (beim Laden des Spiels) für jeden Sound im Spiel einmal aufgerufen. Der buffer wird für die Web Audio API benötigt. Als Buffer wird ein kleiner Teil der Audio-Datei im Arbeitsspeicher bezeichnet. Das ist für das Abspielen der Sounds essenziell.

Nach der Erstellung des THREE.Audio-Objekts können die einzelnen Eigenschaften wie Lautstärke, oder Loop gesetzt werden. Mit complete kann noch eine Callback-Funktion angegeben werden, was beispielsweise bei dem Atmosphäre-Sound nützlich ist, da dieser abgespielt werden soll, sobald der Sound erfolgreich geladen wurde.

Alle dadurch erstellten Sound-Objekte können ganz einfach in anderen Methoden verwendet werden, da nur am jeweiligen Sound-Objekt die Methode play() oder stop() zum Starten bzw. Stoppen aufgerufen werden muss.