Three.js进阶之音频处理与展示
引擎在对音频处理提供了丰富的接口，本文展示两个音频处理示例。
一、声音可视化
Three.js中的声音可视化是以视觉为核心，以音乐为载体，为音乐提供直观的视觉呈现。通过对音乐数据的分析并结合开发需求，能实现酷炫的视觉效果。在本节案例中，16个长方体跟随音乐的律动在y轴方向上进行缩放，效果如图12-13所示。
（1）加载音频文件，然后创建音频加载对象、音频监听对象和创建音频对象，接下来获取音乐数据，根据此数组长度创建长方体，然后进行画面的渲染，具体代码如下。
1 var file; //文件对象
2 var fileUrl; //文件链接
3 ......//此省略了初始化场景中相关变量的代码，读者可自行查看随书源代码
4 function fileChange()
5 file=document.getElementById("importFile").files[0]; //获取文件
6 fileUrl=URL.createObjectURL(file); //创建文件链接
7 document.getElementById("WebGL-output").style.display="block";//将渲染所用的div进行显示
8 document.getElementById("label1").style.display="none"; //隐藏打开文件的标签
9 addAudio(); //加载音频文件
10 }
11 ......//此处省略了初始化场景的相关方法，读者可自行查看随书源代码
12 function addAudio() {
13 var audioLoder=new THREE.AudioLoader(); //创建音频加载
14 var listener = new THREE.AudioListener(); //创建音频监听
15 var audio = new THREE.Audio( listener ); //创建音频对象
16 audioLoder.load(fileUrl, function (audioBuffer ) { //加载音频
17 audio.setBuffer( audioBuffer ); //设置音频数据
18 audio.setLoop( true ); //音频循环
19 audio.play(); //音频播放
20 });
21 analyser = new THREE.AudioAnalyser( audio, fftSize ); //音频数据分析
22 misicDataArray=analyser.data; //指定音乐数组中的数据
23 for (var i=0; i<fftSize＊0.5; i++){
24 tempGeometry[i]=new THREE.BoxGeometry( 12, misicDataArray[i]/4 ,12);//创建长方体
25 material=new THREE.MeshPhongMaterial({color: getColor()});//创建随机颜色的材质
26 mesh[i]=new THREE.Mesh(tempGeometry[i], material) ; //创建物体
27 mesh[i].position.x=20＊i-160; //指定物体的 x坐标
28 mesh[i].castShadow=true; //接受阴影
29 mesh[i].rotation.y= Math.PI/4; //指定绕 y轴旋转的角度
30 scene.add(mesh[i]); //将物体添加进场景
31 }
32 renderScene(); //进行渲染
33 }❑ 第1～10行的功能为获取音频文件，创建文件链接和加载音频文件。当我们打开音频文件的时候，会调用fileChange方法，获取音频文件并创建链接，然后将渲染用div显示，隐藏打开音频文件时的提示信息。
❑ 第12～31行的功能为创建音频加载对象，音频加载监听以及音频对象，然后加载音频并对音频对象进行数据设置和播放设置，对音频进行分析，
（2）介绍渲染场景的方法。在此方法中主要通过更新音乐数据来更新物体在y轴上的缩放比例以及请求绘制下一帧画面，具体的代码如下。
1 function renderScene() { //渲染场景的方法2 analyser.getFrequencyData(); //更新音乐数据3 misicDataArray=analyser.data; //更新音乐数据4 for (var i=0; i<fftSize＊0.5; i++){ //更改物体在 y轴上的缩放比例5 if(misicDataArray[i]/4==0){ //如果数据大小为06 misicDataArray[i]=4; } //数据大小为47 mesh[i].scale.y=misicDataArray[i]/4; //更新物体 y轴的缩放比例8 mesh[i].position.y=0; //指定物体的 y坐标为09 }10 renderer.render( scene, camera ); //渲染场景11 requestAnimationFrame(renderScene); //请求重新绘制场景12 }在渲染场景的方法中，主要是通过更新音乐数据来更新物体在y轴上的缩放比例，从而实现物体随音乐律动来改变高度的功能。然后进行场景渲染，并请求重新绘制场景。
二、 声音与距离
游戏音效是游戏中的重要组成部分，其最大功用就是烘托气氛、表达情感，给玩家营造出身临其境的游戏环境。Three.js引擎能够很好地处理游戏中的声音，并且能够根据摄像机位置与物体位置之间的距离来确定声音的大小。
本案例中乒乓球运动后弹起的时候会发出声音。声音随着摄像机位置与乒乓球位置间距离的改变而改变，距离变小声音增大，距离变大声音减小，这真实地模拟出现实世界的情况。案例的具体实现过程。
（1）单击界面之后对象加载音频及创建监听，然后进行场景的初始化（包括初始化场景中的基本组件，向场景中添加物体和光照，添加鼠标控制以及添加窗口变化监听），最后隐藏提示信息标签，
具体实现代码如下：
1 var flag=true; //单击标志位2 var audioLoader; //音频加载对象3 var listener; //音频监听4 ......//此处省略了其他变量的声明，请读者自行查阅随书源代码5 document.addEventListener("mousedown", function (){ //窗口单击监听6 if(flag){ //如果可以进行单击7 audioLoader = new THREE.AudioLoader(); //创建音频加载对象8 listener = new THREE.AudioListener(); //创建音频监听对象9 init(); //初始化界面10 document.getElementById("tip").hidden=true; //隐藏提示信息11 flag=false;12 }});13 function init() { //初始化界面14 initScene(); //初始化场景的基本组件15 addMesh(); //添加物体16 addLight(); //添加光照17 addControls(); //添加鼠标控制18 document.getElementById("WebGL-output").appendChild(renderer.domElement);19 window.addEventListener( 'resize', onWindowResize, false ); //窗口变化监听20 }21 function initScene(){ //初始化场景22 scene = new THREE.Scene(); //新建场景23 renderer = new THREE.WebGLRenderer({ antialias: true } );//新建渲染器并关闭默认抗锯齿24 renderer.setClearColor(new THREE.Color(0x000000)); //设置背景颜色25 renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染窗口的大小26 renderer.shadowMap.enable=true; //设置接受阴影27 renderer.shadowMap.type = THREE.PCFSoftShadowMap; //设置阴影类型28 camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);29 camera.position.z =20; //摄像机位置的 z坐标30 camera.position.y =15; //摄像机位置的 y坐标31 camera.add(listener); //添加音频监听32 camera.lookAt(new THREE.Vector3()); //摄像机观察目标点33 } ❑ 第1～12行中的代码声明了程序中的变量，包括音频加载对象、音频加载监听和单击标志位等，注册窗口单击监听。进入界面，单击当前窗口，触发单击事件。接下来创建音频加载对象和音频监听对象，并进行界面的初始化以及隐藏提示信息。
❑ 第13～20行的功能为初始化场景中的基本组件、添加物体，光照和鼠标控制，以及注册窗口变化监听并将渲染结果添加到网页元素中。其中添加光照和鼠标控制的代码与前面案例的相似，在此不再赘述。
❑ 第21～33行为初始化场景，创建摄像机、场景以及渲染器对象，设置摄像机的位置及观察目标的位置，并添加音频监听和设置阴影及阴影类型。在此方法中，最重要的就是给摄像机添加音频监听，这是模拟真实声音效果的前提。
单击界面之后才能进入场景，这是为了应对Google Chrome浏览器禁止声音自动播放策略的，我们只需与网页进行交互，便可以播放声音。
（2）看一下添加物体及加载音频方法的核心部分，包括加载音频，创建位置音频对象，设置音频数据，设置音频音量的大小和向场景中添加乒乓球。此外还有渲染场景的方法，此方法主要控制小球的运动以及在小球弹起时播放声音，
具体代码如下：
1 function addMesh(){ //添加物体及加载音频2 ......//此处省略了向场景中添加乒乓球台模型的代码，读者可自行查阅随书源代码3 audioLoader.load( 'music/ping_pong.mp3', function ( buffer ){ //加载音频4 var ballGeometry = new THREE.SphereGeometry(0.5,20,20); //创建球体5 var ballMaterial = new THREE.MeshLambertMaterial({color:0xffffff});//创建材质6 ball=new THREE.Mesh(ballGeometry, ballMaterial); //创建网格对象7 ball.position.x = -10; //球体的 x坐标8 ball.position.y = 8.2; //球体的 y坐标9 ball.position.z = 0; //球体的 z坐标10 ball.castShadow=true; //球体投射阴影11 var audio = new THREE.PositionalAudio( listener ); //创建位置音频12 audio.setBuffer( buffer ); //设置音频数据13 audio.setVolume(10); //设置音频的音量14 tempy=ball.position.y; //记录当前时刻球体的 y坐标15 ball.userData.flag=false; //自定义播放标志位16 ball.add( audio ); //向球体添加音频17 scene.add(ball); }); //向场景添加球体18 }19 function renderScene() { //渲染场景的方法20 requestAnimationFrame(renderScene); //请求绘制下一帧画面21 render(); //调用实际渲染场景的方法22 }23 function render() { //实际渲染场景的方法24 temp+=0.03; //增加球体运动角度25 tempy=ball.position.y; //记录当前时刻球体的 y坐标26 ball.position.y=8.2+4＊Math.abs(Math.sin(temp)); //改变球体的 y坐标27 ball.position.x=10＊Math.cos(temp); //改变球体的 x坐标28 var audio = ball.children[ 0 ]; //获取音频对象29 if(ball.position.y<tempy){ //如果球体 y坐标小于记录的球体 y坐标30 ball.userData.flag=true; } //播放标志位为true31 else{ if(ball.userData.flag){ //如果可以播放音频32 audio.play(); //播放音频33 ball.userData.flag=false; //播放标志位为false34 }}35 renderer.render( scene, camera ); //进行场景渲染36 }❑ 第3～18行的代码为加载音频，创建球体网格对象，设置球体的相关属性，创建位置音频对象，设置音频数据和向球体添加音频以及向场景中添加球体。通过向球体添加音频，可将音频对象和球体关联起来。通过改变播放标志位，可以控制音频播放。
❑ 第19～36行的代码为对场景进行渲染。在实际渲染场景的方法中，在当前球体的y坐标大于改变位置后球体的y坐标值时，物体处于下落状态，播放标志位为true。反之，物体处于上升状态，音频播放一次，播放标志位为false。这可避免重复播放。