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){                //如果数据大小为0
        6                 misicDataArray[i]=4; }                  //数据大小为4
        7             mesh[i].scale.y=misicDataArray[i]/4;      //更新物体 y轴的缩放比例
        8             mesh[i].position.y=0;                      //指定物体的 y坐标为0
        9        }
        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.inner
                      Height, 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; }                   //播放标志位为true
        31             else{ if(ball.userData.flag){                   //如果可以播放音频
        32                     audio.play();                           //播放音频
        33                     ball.userData.flag=false;               //播放标志位为false
        34                 }}
        35             renderer.render( scene, camera );               //进行场景渲染
        36        }

❑ 第3~18行的代码为加载音频,创建球体网格对象,设置球体的相关属性,创建位置音频对象,设置音频数据和向球体添加音频以及向场景中添加球体。通过向球体添加音频,可将音频对象和球体关联起来。通过改变播放标志位,可以控制音频播放。
❑ 第19~36行的代码为对场景进行渲染。在实际渲染场景的方法中,在当前球体的y坐标大于改变位置后球体的y坐标值时,物体处于下落状态,播放标志位为true。反之,物体处于上升状态,音频播放一次,播放标志位为false。这可避免重复播放。
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值