Creating immersive 3D sound experiences using Web Audio and Three.js

I have a panorama player with 3D sounds that I am trying to integrate into Three.js by following this tutorial: http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/

The camera remains fixed, while the 3D sounds are positioned across the scenes. I want the volume of the sounds to be influenced by whether the camera is facing the scene or not.

Here is how the sounds are created (using a vector3 for position):

function playSound(buffer, looping, position, volume) {
    var sound = {};
    sound.source = context.createBufferSource();
    sound.volume = context.createGain();
    sound.source.connect(sound.volume);
    sound.volume.connect(mainVolume);

     var gainNode = context.createGain();
     gainNode.gain.value = volume;
     sound.source.connect(gainNode);


    sound.source.buffer = buffer;
     if(looping)
         sound.source.loop = true;
     sound.source.connect(context.destination);
     sound.source.start();

     sound.panner = context.createPanner();
     sound.position = position;

     //sound.panner.updateMatrixWorld();
     sound.volume.connect(sound.panner);
     sound.panner.connect(mainVolume);

     sceneSounds.push( sound );
 }

This implementation works effectively.

In the render loop:

   lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);

    target.x = 512 * Math.sin(phi) * Math.cos(theta);
    target.y = 512 * Math.cos(phi);
    target.z = 512 * Math.sin(phi) * Math.sin(theta);

    camera.lookAt(target);

    if(sceneSounds.length > 0)
        updateSceneSounds( target );

I'm invoking this method with the camera's target:

function updateSceneSounds( target )
{

    for(var s in sceneSounds){
        var sound = sceneSounds[s];
        distance = sound.position.distanceTo( target );

        console.log( distance );

    }
}

The distances are currently ranging between 400-500, which may not be very helpful as they might be incorrect values to use.

Any suggestions or tips on the best approach to tackle this issue?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

clicking on a link with the symbol "#" in the href attribute in Firefox prevents the setter

Good morning everyone, It's early Monday morning and I'm having trouble understanding why this particular line works in Internet Explorer but not in Firefox. <a class="button" href="#" onclick="setMaintenanceMode(false);">disable</a> ...

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

From PHP to JavaScript, the looping journey begins

Question I am attempting to display markers on a map using PHP to fetch the data, then converting it into JavaScript arrays for marker addition. Below is an example of my code: Database query require_once("func/connect.php"); $query = "SELECT * FROM sit ...

Is it possible to use tabs.create to generate a tab and then inject a content script, where the code attribute is effective but the file attribute seems to be ineffective

I am currently facing an issue with injecting a content script file into a newly created tab. The problem lies in the fact that I keep receiving an error stating chrome.tabs.executeScript(...) is undefined in the console output of the Popup. It may be wort ...

Minimize the number of HTTP requests by including CSS and JS files in PHP

I've been considering a method to reduce the number of HTTP requests made when loading a page by minimizing the amount of downloaded files, while still keeping separate files on the server. The thought process is as follows: <!DOCTYPE html> &l ...

Learning to read HTML tags using JavaScript is a valuable skill

I've been struggling with a problem for some time now and I really need help fixing it. Here's the issue: I have an asp:GridView where I store text with HTML tags in my database under an English column. During the DataBound event, I use Context. ...

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

What is the best way to sort inertia data on the client-side?

Looking for a solution with my component that receives data, I have the following setup in my controller: route::get('/', function() { return inertia('foo', ['data' => Model::all()]) }); Within my Vue component: <templa ...

What is causing this iframe ads code to so severely disrupt the functionality of Internet Explorer when using document.write

So, I've recently encountered an issue where a certain problem arose, and although I managed to fix it, I am still curious about the root cause behind why it occurred in the first place. TL;DR The use of Google-provided conversion tracking code that ...

Struggling to incorporate a Search Filter feature into my React project, unfortunately, it doesn't seem to be functioning correctly. Any assistance would be greatly appreciated. Can anyone lend

Hey there! I'm diving into the world of React and currently working on creating a search filter that fetches data from an API. Despite not encountering any errors in the console, it seems like my search bar isn't functioning properly. Any suggest ...

Encountering a CastError in Mongoose validation where the value fails to cast to undefined

I encountered a forbidden message while attempting to save data into the database. CastError: Cast to undefined failed for value [ {"product":{"supplierId":{"undefined":"rfytr"}}}, {"product":{"supplierId":{"$empty":"rfytr"}}} ] at path "condition" ...

Removing the background inside an Iframe using HTML

Is there a method to eliminate the background color from the original site within an Iframe? It currently displays as white. Would it be possible to achieve this with Javascript? ...

Concurrent programming in Node.js with the async module

Is it recommended to avoid utilizing multiple instances of an async module feature simultaneously? In my code, there are three parts that need to be executed in sequence. The structure of my code looks like this: var async = require('async'); a ...

Tips for accessing information from different sources within Vue 3

In my Vue 3 setup() method, I have an array [] stored as a constant. This array consists of X objects and represents the responses of a form. My goal is to showcase each object on a single dynamic page within our internal dashboard by using v-for in the t ...

Strategies for managing JSON data with numeric strings

I have implemented a PHP code to fetch JSON data from a web server. Here is the code snippet: $result = mysql_query("select lat,lng from gpsdata limit 10"); $rows = array(); while($r = mysql_fetch_assoc($result)) { $rows[] = $r; } print json_encod ...

The Wikipedia API is unable to be loaded using the XMLHttpRequest

I have encountered this error before on this platform, and although I managed to fix it, I am seeking a more in-depth explanation of the solution. For a project where I am learning, I decided to create a Wikipedia Viewer application. The first step was to ...

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Recently, I embarked on a new project using NextJS and Supabase by following the tutorial available at this link. After completing the initial setup by updating the ".env.example" file to ".env.local" with the Supabase credentials, including creating a ne ...

What is the method for incorporating locales into getStaticPaths in Next.js?

I am currently utilizing Strapi as a CMS and dealing with querying for slugs. My goal is to generate static pages using getStaticPaths and getStaticProps in Next.js. Since I'm working with multiple locales, I have to iterate through the locales to re ...

The request does not include the cookies

My ReactJS client sends a cookie using this NodeJS code snippet: res.cookie("token", jwtCreation, { maxAge: 24 * 60 * 60 * 1000, // Milliseconds (24 hours) sameSite: 'None', // Cross-site requests allowed for modern browser ...