Three.js의 여러 3D 사운드

Question

저는이 문제에 조금 어려움을 겪고 있습니다.

나는 큐브로 된 선을 만들고 싶다. 각자 하나의 소리가 나고, 당신이 그것에 더 가까워 진다면 그 소리를들을 수있다.

목표는 줄의 처음부터 끝까지 탐색하는 것입니다. 이렇게하면 다양한 소리를 연주하고 '음악'을 만들 수 있습니다.

내가 가진 문제는 20 개의 큐브 중 6 개만들을 수 있다는 것입니다.

이 소리를 만들 수있는 기능입니다 - http://maximebonhomme.fr/mission87/tests

(왼쪽 전진을 클릭, 마우스 오른쪽 뒤로 이동합니다)

: 는 (에서 여기

온라인 예입니다 : http://threejs.org/examples/#misc_sound)

var Sound = function (sources, radius, volume) { 
    var audio = document.createElement('audio'); 
    for (var i = 0; i < sources.length; i ++) { 
    var source = document.createElement('source'); 
    source.src = sources[ i ]; 
    audio.appendChild(source); 
    } 
    this.position = new THREE.Vector3(); 
    this.play = function() { 
    audio.play(); 
    } 
    this.update = function (camera) { 
    var distance = this.position.distanceTo(camera.position); 
    if (distance <= radius) { 
     audio.volume = volume * (1 - distance/radius); 
     // console.log(distance/radius/2); 
     material_sky.color.setHSL(distance/radius/2 ,0.666,0.666); 
    } else { 
     audio.volume = 0; 
    } 
    } 
} 

-

,536,913,632 내 큐브

for(var i = 0 ; i < 20 ; i ++){ 
    array[i] = new THREE.Mesh(music_geo,material_draw); 
    array[i].position.z = i*20; 
    array[i].position.x = 30; 
    scene.add(array[i]); 

    sounds[i] = new Sound([ soundSRC+source2+'.mp3', soundSRC+source2+'.ogg' ], 10, 1); 
    sounds[i].position.copy(array[i].position); 
    sounds[i].play(); 
} 

만들 경우 10

이입니다 -

을 내가 (내 렌더링 기능에)

for(var i = 0 ; i < 20 ; i ++){ 
    sounds[i].update(camera); 
} 

을 카메라 과 소리를 업데이트 곳이다 -

그래서 내가 잘못하고있는 것이 맞는지, 아니면 Three.js인지, 브라우저인지 또는 6 개 이상의 소리를 지원하지 않습니다.

고맙습니다. 누군가가 관심이 있다면 내가 여기에 웹 오디오 API 를 사용하여이 문제를 극복하기 위해 관리 08/06/14

EDIT (즉 내가 원하는 기능) 소리는 주파수, 수정의 만 그것은 내가 생각하는 노래 파일과 함께 작동합니다.

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext')) 
    window.webkitAudioContext = AudioContext; 

var context = new webkitAudioContext(); 

var Sound = function (radius, volume) { 

    var source = context.createBufferSource(); 
    var osc = context.createOscillator(); 
    var oscGain =context.createGainNode(); 
    osc.type = 0; 

    osc.connect(oscGain); 
    oscGain.connect(context.destination); 
    osc.noteOn(0); 
    osc.frequency.value = 500; 
    oscGain.gain.value = 0; 

    this.position = new THREE.Vector3(); 

    this.update = function (camera) { 
    var distance = this.position.distanceTo(camera.position); 
    if (distance <= radius) { 
     oscGain.gain.value = volume * (1 - distance/radius); 

     material_sky.color.setHSL(distance/radius/2 ,0.666,0.666); 
    } else { 
     oscGain.gain.value = 0; 
    } 
    } 
} 

건배 사운드를 생성

기능!

Answer 1

웹 오디오 API 을 사용하여이 문제를 극복 할 수있었습니다. 누군가가 관심을 갖고 있다면 소리가 빈도 (내가 원했던 것임)이지만 가정하는 노래 파일과 함께 작동합니다.

if (window.hasOwnProperty('AudioContext') && !window.hasOwnProperty('webkitAudioContext')) 
    window.webkitAudioContext = AudioContext; 

var context = new webkitAudioContext(); 

var Sound = function (radius, volume) { 

    var source = context.createBufferSource(); 
    var osc = context.createOscillator(); 
    var oscGain =context.createGainNode(); 
    osc.type = 0; 

    osc.connect(oscGain); 
    oscGain.connect(context.destination); 
    osc.noteOn(0); 
    osc.frequency.value = 500; 
    oscGain.gain.value = 0; 

    this.position = new THREE.Vector3(); 

    this.update = function (camera) { 
    var distance = this.position.distanceTo(camera.position); 
    if (distance <= radius) { 
     oscGain.gain.value = volume * (1 - distance/radius); 

     material_sky.color.setHSL(distance/radius/2 ,0.666,0.666); 
    } else { 
     oscGain.gain.value = 0; 
    } 
    } 
} 

건배 사운드를 생성

기능!