Threejs + CannonJS碰撞事件，碰撞声音

参考资料：threejs中文网

threejs qq交流群：814702116

Threejs + CannonJS碰撞事件，碰撞声音

本节课给大家主要讲解CannonJS的碰撞事件，并根据碰撞信息，设置碰撞声音。

碰撞体Body的碰撞事件collide

浏览器控制台查看碰撞事件的属性

body.addEventListener('collide', (event) => {
    console.log('碰撞事件', event);
})

查看碰撞事件的.contact属性,.contact表示当前body与其他碰撞体Body的碰撞信息。

body.addEventListener('collide', (event) => {
    console.log('碰撞碰撞信息', event.contact);
})

碰撞事件的接触属性.contact

当两个碰撞体Body碰撞的时候，会生成碰撞信息，碰撞事件.contact包含内容是body之间的碰撞信息。

属性.contact的值对应CannonJS的一个类ContactEquation，cannon-es对应封装的文件目录\src\equations\ContactEquation.ts。

点击文档地址ContactEquation

contact.bi和contact.bj两个属性表示发生碰撞的两个碰撞体Body。

• contact.bi: 监控碰撞事件的Body
• contact.bj: 与contact.bi发生的碰撞的Body

contact.getImpactVelocityAlongNormal()

两个物体在碰撞法线方向上对的相对速度

const contact = event.contact;
//获得沿法线的冲击速度
contact.getImpactVelocityAlongNormal()

碰撞声音基本思路

提前准备一个乒乓球碰撞地面的录音，然后通过Audio加载音频，当物理小球body与物理地面发生碰撞的时候，播放音频。

// 这里只是简单的思路，后面会详细讲解
const audio = new Audio('./碰撞声.wav');
... 
body.addEventListener('collide', (event) => {
    ...
    // 小球body发生碰撞事件，播放音频
    audio.play();
})

加载音频代码

注意浏览器限制，音频首次播放，需要用户交互，不能用audio.play();代码直接播放，所以在碰撞事件播放音频之前，先通过用户点击事件播放音频。

const audio = new Audio('./碰撞声.wav');
document.getElementById('audio').addEventListener('click', function () {
    audio.volume = 0;//按钮开启声音时候，设置静音
    audio.play();
})

碰撞事件触发音频播放

body.addEventListener('collide', () => {
    audio.volume = 1;
    audio.play();
})

通过碰撞程度，控制音量大小

刚刚讲过contact.getImpactVelocityAlongNormal()可以获取两个物体在碰撞法线方向上对的相对速度。

可以用碰撞相对速度表征碰撞程度，通过碰撞相对速度，控制音量大小。

// 浏览器控制台测试下最大碰撞相对速度
body.addEventListener('collide', (event) => {
    const contact = event.contact;
    const ImpactV = contact.getImpactVelocityAlongNormal();
    console.log('ImpactV', ImpactV);
})

body.addEventListener('collide', (event) => {
    const contact = event.contact;
    const ImpactV = contact.getImpactVelocityAlongNormal();
    // 碰撞越狠，声音越大
    //4.5比ImpactV最大值吕略微大一点，这样音量范围0~1
    audio.volume = ImpactV / 4.5;
    audio.play();
})

当然你也可以用其他函数关系

audio.volume = Math.pow(ImpactV / 4.5,2);

声音资源下载地址

https://www.aigei.com/