Positional Audio in WebVR with SpotLights to create Nightclub in VR

This is part of #DaysInVR series. View All VR Projects. Yesterday we learnt how to create a car showroom using collada objects in WebVR . Today we’re going to use SpotLight and PositionalAudio in WebVR to create a nightclub effect.

Demo | Source

Positional Audio in WebVR

In this tutorial, we’ll learn how to use SpotLight and PositionalAudio to create a nightclub like environment in VR.

Using Spotlights to create a nightclub

We’ll use multiple SpotLights and tween its position around to create a nightclub light effect. We’ll use MeshPhongMaterial as the floor material so that it reflects the lights to create the effect.

We’ll use a tween library to move the SpotLights around.

Adding Speaker and Positional Audio to VR

We’ll add a speaker object as our sound source in the Scene. Adding an object is similar to the movie theatre in VR tutorial we did on before. We’ll position the object in front of the camera.

For playing sound, we need an AudioListenerAudioLoader and PositionalAudio. We’ll add AudioListener to the camera, load the audio and use PositionalAudio in WebVR to place in at the speaker’s location. That way when the user moves his head, it feels like the audio is coming from the speaker.

You can check the full source to understand how it all fits together.

Its your turn

Create your own customization of nightclub VR. Try adding different lights and multiple PositionalAudio. Don’t forget to share your experience with it in the comments below.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1