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。这可避免重复播放。