728x90
반응형
이벤트로 생성한 custom sphere가 충돌하였을 때 충돌 콜백함수로 sound를 재생하는 방법을 알아보자.
// sound when collision
const sound = new Audio('/sounds/boing.mp3');
function collide(e) {
const velocity = e.contact.getImpactVelocityAlongNormal();
if(velocity > 3){
sound.currentTime = 0;
sound.play();
}
}
// event
canvas.addEventListener('click', () => {
const customSphere = new CustomSphere({
// scene: scene,
scene,
cannonWorld,
geometry: sphereGeometry,
material: sphereMaterial,
x: (Math.random() - 0.5) * 2,
y: Math.random() * 5 + 2,
z: (Math.random() - 0.5) * 2,
scale: Math.random() + 0.2
});
spheres.push(customSphere);
customSphere.cannonBody.addEventListener('collide', collide);
});
Audio객체를 이용해서 sound object를 생성하고 play()로 실행할 수 있다.
collide함수를 addEventListener를 통해 customSphere의 body의 'collide'함수의 이벤트로 설정하면 collide함수 이벤트가 충돌시 실행된다.
collide함수의 매개변수인 e는 충돌했을 때 충돌정보를 가져올 수 있다. 이 충돌 정보에서 충돌했을 때 속력을 통해 일정 속력 이상으로 충돌하면 sound가 재생하게 할 수 있다.
sound를 재생할 때 하나의 사운드가 이미 실행 중이라면 같은 Audio객체에서는 동시에 여러 sound를 재생할 수 없기 때문에 currentTime을 0으로 설정하는 것으로 재생 중인 sound의 시간을 0으로 초기화하여 다시 재생하는 방법을 사용한다.
실제로 Unity에서 sound를 다룰 때에는 각 sound마다 개별 component를 사용하여 동시에 여러 사운드가 재생하는 방법을 사용하기에 three.js에서도 같은 방식으로 구성할 수 있을 것이다.
728x90
반응형
'개발 · 컴퓨터공학' 카테고리의 다른 글
three.js 도미노 시뮬레이션 (0) | 2022.10.26 |
---|---|
three.js 오브젝트 삭제하기 (0) | 2022.10.25 |
three.js body 물리 테스트 최적화 (0) | 2022.10.21 |
three.js 커스텀 오브젝트 생성 이벤트 만들기 (0) | 2022.10.20 |
three.js body에 힘 가하기 (applyForce) (0) | 2022.10.19 |