THREE.js 에서 음악/효과음 사용하기 - Audio

r111

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() 를 사용합니다.

AudioLoader()

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

 

음악 객체 생성 예제

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.