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;
    }
  }
}

-

这是我创建立方体的地方

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();
}

-

这是我用相机更新声音的地方（在我的渲染功能中）

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

-

所以我想知道是不是我做错了，或者它是Three.js，浏览器还是不能支持超过6种声音的东西。

非常感谢！

编辑08/06/14

我设法通过使用Web Audio 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;
    }
  }
}

干杯！

Answer 1

我设法通过使用Web Audio 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;
    }
  }
}

干杯！

Three.js中的多个3D声音

1 个答案: