창의개인연구
창의개인연구 ② PannerNode와 Three.js로 만든 첫 공간 음향 데모
Web Audio API의 PannerNode + OscillatorNode + Three.js 3D 시각화로 가장 단순한 형태의 공간 음향 데모를 만들었다. 마우스로 음원을 움직이면 그 방향에서 소리가 나도록 만든 첫 작동본의 기록.
2026-06-08
#Three.js
2개의 글
2개의 글
Web Audio API의 PannerNode + OscillatorNode + Three.js 3D 시각화로 가장 단순한 형태의 공간 음향 데모를 만들었다. 마우스로 음원을 움직이면 그 방향에서 소리가 나도록 만든 첫 작동본의 기록.
Three.js의 OrbitControls·DragControls와 Web Audio API의 PannerNode를 묶어, 마우스로 음원을 직접 잡고 끌어다 놓는 3D 인터페이스를 만들었다. 합성 톤과 파일 업로드 양쪽을 같은 공간 안에서 공간화하고, X·Y·Z 3축을 모두 다룬다.