O'Reilly logo

Game Development with Three.js by Isaac Sukin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Sound

Although Three.js is a graphics library, there is an experimental THREE.AudioObject class at examples/js/AudioObject.js that uses the Web Audio API to support 3D sound effects. This object inherits from Object3D so it can be attached to other objects and placed in the world. It is designed to use spatially accurate 3D sound. The main caveat is that the class only works with Chrome as of Three.js version r61 due to browser incompatibilities.

Tip

Like with external models, audio is loaded with AJAX, so local file URLs won't work by default.

That said, let's go ahead and try adding some cheering sounds when a flag is captured. First, we'll create our AudioObject instances when we initialize our flags:

var cheering = new THREE.AudioObject('cheering.ogg', ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required