Three.js物理引擎模拟声音传播方向与强度
在虚拟现实、在线展厅或建筑声学仿真这类3D交互场景中，用户听到的声音如果只是简单地“播放出来”，而没有方向感和距离变化，那整个体验就会大打折扣。试想你站在一个巨大的展厅里，明明看到远处有台机器在运转，却感觉声音是从耳机正中央传来的——这种割裂感会迅速打破沉浸。
要解决这个问题，关键在于让声音像真实世界一样具备空间属性：它应该从某个具体位置发出，随着距离变远而减弱，被墙壁挡住时变得模糊，甚至因物体运动产生多普勒效应。幸运的是，借助Three.js结合物理引擎，我们完全可以在浏览器中实现这一整套声学模拟系统。
Three.js本身提供了PositionalAudio类，这是构建空间音效的起点。它的核心思路是将音频源绑定到3D场景中的某个物体上，并通过Web Audio API的HRTF（头部相关传递函数）技术实现双耳渲染——也就是说，左耳和右耳接收到的声音存在微小的时间差与强度差，大脑据此判断声源方位。
但仅有位置还不够。真正的挑战在于如何让声音“感知”环境：是否被障碍物遮挡？路径上有无反射面？空气对高频成分有没有吸收？这些问题的答案不能靠Three.js单独完成，必须引入物理引擎来补全拼图。
以cannon-es为例，这个轻量级JavaScript物理库虽然主要用于刚体动力学模拟，但其射线投射（raycasting）功能恰好适用于声波路径检测。我们可以把声源到听者之间的连线看作一条“探测射线”，一旦这条射线与墙体或其他实体发生碰撞，就说明声音传播受到了阻碍。
举个例子，在一个VR导览应用中，当用户走到一堵墙后方时，原本清晰的背景音乐应当变得沉闷甚至几乎听不见。传统做法可能需要手动设置触发区域，但这种方式僵硬且难以扩展。而使用物理引擎后，系统能自动计算出当前视角下所有声源的可视性状态，无需预设任何边界条件。
import * as CANNON from 'cannon-es'; // 初始化无重力的物理世界，仅用于声学检测 const world = new CANNON.World(); world.gravity.set(0, 0, 0); // 创建一面墙作为障碍物 const wallShape = new CANNON.Box(new CANNON.Vec3(5, 5, 0.1)); const wallBody = new CANNON.Body({ mass: 0 }); wallBody.addShape(wallShape); wallBody.position.set(0, 0, -10); world.addBody(wallBody); // 每帧更新声音遮挡状态 function updateSoundOcclusion(soundObject, listenerPosition) { const sourcePos = soundObject.position; const rayFrom = new CANNON.Vec3(sourcePos.x, sourcePos.y, sourcePos.z); const rayTo = new CANNON.Vec3( listenerPosition.x, listenerPosition.y, listenerPosition.z ); const result = new CANNON.RaycastResult(); world.raycastClosest(rayFrom, rayTo, result); if (result.hasHit) { const hitPoint = result.getHitPoint(new CANNON.Vec3()); const distanceToHit = hitPoint.distanceTo(rayFrom); const directDistance = rayFrom.distanceTo(rayTo); // 碰撞点位于声源与听者之间 → 声音被阻挡 if (distanceToHit < directDistance) { soundObject.setVolume(0.3); // 可根据材质进一步细化 } else { soundObject.setVolume(1.0); } } else { soundObject.setVolume(1.0); } }上面这段代码展示了最基础的遮挡逻辑。实际项目中还可以更进一步：为不同材质赋予不同的声学特性。比如布帘只会轻微削弱声音，而混凝土墙则几乎完全阻隔。这只需要在碰撞体上附加自定义属性即可：
const curtainMaterial = new CANNON.Material('curtain'); const concreteMaterial = new CANNON.Material('concrete'); wallBody.material = concreteMaterial; // 在射线检测后读取材质类型 if (result.body && result.body.material) { const matName = result.body.material.name; switch(matName) { case 'curtain': gain *= 0.7; break; case 'concrete': gain *= 0.2; break; default: gain *= 0.5; } }至于声音随距离衰减的表现，则更多依赖于Web Audio API本身的机制。Three.js的PositionalAudio支持三种距离模型："linear"、"inverse"和"exponential"。其中"inverse"是默认选项，公式如下：
$$
G = \frac{refDistance}{refDistance + rolloffFactor \times (\max(d, refDistance) - refDistance)}
$$
虽然这不是严格的平方反比定律（$I \propto 1/d^2$），但通过调节rolloffFactor参数可以逼近真实世界的声强衰减曲线。例如将滚降因子设为2，并配合较小的参考距离（如1米），就能获得较为自然的效果。
当然，如果你追求更高的精度，也可以绕过内置模型，直接手动控制增益：
function updateGainManually(sound, source, listener) { const distance = source.position.distanceTo(listener.position); let gain = 1.0 / (1 + distance * distance * 0.1); // 近似平方反比 gain = Math.max(gain, 0.05); // 设置最小音量阈值 sound.setVolume(gain); }这种方法的好处是灵活度极高，你可以轻松加入湿度、温度对声速的影响，或者根据不同频率设计差异化衰减策略——毕竟现实中高频更容易被空气吸收。
整个系统的运行流程其实很清晰：每一帧动画循环中，先同步摄像机位置到AudioListener，然后遍历所有活动声源，依次执行三项操作：
1. 计算与听者的距离，设定基础音量；
2. 发射射线检测路径是否被遮挡，动态调整增益或启用低通滤波；
3. 若声源处于运动状态，触发多普勒频移效果。
这一切都建立在一个统一的坐标系之上。Three.js负责视觉呈现和用户交互，cannon-es维护一份轻量化的碰撞体世界用于路径查询，而Web Audio API则处理最终的声音合成与空间化输出。三者协同工作，形成闭环反馈。
不过在真实项目中，性能优化不可忽视。每帧对上百个声源都做完整射线检测显然是不现实的。常见的做法包括：
-视锥剔除：只处理视野内的声源；
-分层更新：非关键声源每秒检测几次即可；
-优先级管理：根据距离或重要性动态分配计算资源。
另外，音频缓冲区通常较大，建议使用异步解码并缓存：
audioContext.decodeAudioData(arrayBuffer, (buffer) => { cachedBuffers[soundKey] = buffer; });这样既能避免主线程卡顿，又能提升重复播放时的响应速度。
最后还要考虑兼容性问题。部分移动端浏览器对HRTF支持有限，双耳定位效果可能退化为普通立体声平移。为此应准备降级方案，例如检测到不支持时改用左右声道增益差模拟方向感。
值得一提的是，这类技术不仅适用于娱乐场景。在建筑声学评估中，设计师可以通过可视化声影图快速识别潜在的隔音缺陷；在军事仿真训练中，士兵能依据枪声方向做出战术反应；就连远程会议系统也开始探索空间音频，让用户感知发言者的位置关系。
未来的发展方向也很明确：当前的模型仍停留在“直线传播+遮挡”的初级阶段，下一步可以引入混响脉冲响应（Convolution Reverb）来模拟房间特有的回声特征，甚至尝试声影映射（Acoustic Shadow Mapping）技术生成动态声场遮蔽图，就像光照阴影那样实时更新。
这些进阶功能虽然复杂，但底层逻辑是一致的：用物理规则驱动感知体验。当声音不再是一个孤立的播放事件，而是成为环境互动的一部分时，虚拟世界才真正开始拥有生命力。
这种高度集成的设计思路，正引领着Web端3D应用向更真实、更智能的方向演进。
