Three.js 에서 Audio 사용하기

THREE.js 에서 Audio는 HTML5 규약인 Web Audio API 를 사용합니다.

THREE.js 에서 Audio는
배경음 같은 화면 전체에서 골고루 흘러나오는 일반적인 Audio 와
3차원 공간속 특정 위치(또는 특정 위치의 사물)에서 나오는 PositionalAudio 를 제공합니다.

THREE.js 에서 Audio를 사용하기 위해서는
AudioListener 라는 소리감지 매개체를 Camera에 설치해 주어야 합니다.

AudioListener
: Camera 와 마찬가지로,
Scene으로 구성된 가상의 3차원 공간에서 나는 소리들을 사람에게 들려주는 매개체 이다.

 

 

AudioListener 생성

var 소리감지기 = new THREE.AudioListener();
카메라.add( 소리감지기 );

 

 

AudioLoader()

new THREE.AudioLoader()
.load(
  url : String, // 음악파일 경로
  onLoad : Function, // 파일 로드가 완료된뒤 실행할 함수
  onProgress : Function, // 파일 로드 진행중에 진행상황(총, 읽어들인 바이트수)이 리턴됩니다.
  onError : Function // 파일 로드에 실패했을때 실행할 함수
);

음악을 플레이 하기위해서 사전에 음악파일을 읽어들이기 위해 AudioLoader() 를 사용합니다.

 

 

오디오 재생이 끝난 시점

// 이벤트 형식 선언
THREE.Audio.prototype.onEnded = function() {
   this.isPlaying = false;
   this.dispatchEvent( { type: 'ended' } ); // ended
};

// 이벤트 등록
var mySound = new THREE.Audio( listener );
audioLoader.load( 'url...', function(buffer){
   mySound.setBuffer( buffer );
   mySound.addEventListener( 'ended', function(){
      console.log( 'ended' );
   });
});

 

 

음악 객체 생성 예제

var 소리감지기 = new THREE.AudioListener();
카메라.add( 소리감지기 );

// '배경음' 이라는 Audio객체 생성
var 배경음 = new THREE.Audio( 소리감지기 );

var 로더 = new THREE.AudioLoader();
로더.load(
  'sounds/ambient.ogg',
  function( buffer ) { // 파일 로드가 완료된 뒤
    배경음.setBuffer( buffer ); // '배경음'객체에 음악파일 할당
    배경음.setLoop( true ); // 반복재생 여부
    배경음.setVolume( 0.5 ); // 볼륨설정
    배경음.play(); // 재생시작
  }
);

 

아래예제는 PositionalAudio 를 사용하여 박스에서 음악이 나오는 예제 입니다.
- 박스의 위치에 따라 소리의 크기와 좌우 스피커의 음량이 달라집니다.

 

 

 

See the Pen PositionalAudio by Ricon Kim (@vitneum) on CodePen.

 

 

 

 

 

출처: https://horangi.tistory.com/408?category=821071 [노을빛호랑이의 연습장]