WEBGL学习笔记(五):让三维模型动起来

 

游戏已经做好,但是博客园不能支持哈,我在我的独立博客里面加入了这个游戏。

 

 

 

加载时候会黑屏,等待数秒即可,点击这里体验试玩:FlappyBird3d游戏试玩

 

 

 

前面说过,通过control实现动态效果,但只是通过鼠标等设备与用户进行交互的使用。

如想做出人物行走,奔跑这样的复杂动作,显然不是用control类来实现的。

 

看下面的代码

var loader = new THREE.JSONLoader();

                loader.load( "models/animated/flamingo.js", function( geometry ) {
                    geometry.computeVertexNormals();
                    geometry.computeMorphNormals();
                    var material = new THREE.MeshPhongMaterial( {
                        color: 0xffffff,
                        morphTargets: true,
                        morphNormals: true,
                        vertexColors: THREE.FaceColors,
                        shading: THREE.SmoothShading
                    } );
                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.x = 150;
                    mesh.position.y = 150;
                    mesh.scale.set( 1.5, 1.5, 1.5 );
                    scene.add( mesh );
                    mixer = new THREE.AnimationMixer(mesh);


mixer.clipAction(geometry.animations[0]).setDuration(1).play();

通过loader类加载了一个js格式的3d模型,这里很好理解。定义材料,提供给mesh。顺便说一下geometry,material,mesh之间的关系。

geo是loader加载得到,mater可以是颜色,贴图等等,mesh就是最终显示在scene中的模型了,geometry和material组成了mesh。

重点在于这句话

mixer = new THREE.AnimationMixer(mesh);

这个THREE.AnimationMixer是什么,通过名字可以看出是混合,为了弄清楚,我们打开这个3d模型js文件。看到代码如下:

    "vertices": [0,101,79,0,55,189,0,-80,-186,0,88,-85,-110,-66,-79,1,-50,328,-25,-14
                                                                                     
    "morphTargets": [                                                                
    { "name": "flamingo_flyA_000", "vertices": [0,101,79,0,55,189,0,-80,-186,0,88,-85,-
    { "name": "flamingo_flyA_001", "vertices": [0,112,79,0,65,189,0,-69,-186,0,99,-84,-
    { "name": "flamingo_flyA_002", "vertices": [0,121,80,0,73,189,0,-58,-186,0,109,-84,
    { "name": "flamingo_flyA_003", "vertices": [0,121,82,0,72,190,0,-55,-187,0,111,-82,
    { "name": "flamingo_flyA_004", "vertices": [0,112,83,0,63,191,0,-60,-188,0,105,-81,
    { "name": "flamingo_flyA_005", "vertices": [0,99,84,0,48,192,0,-70,-189,0,94,-80,-1
    { "name": "flamingo_flyA_006", "vertices": [0,84,85,0,32,192,0,-83,-189,0,80,-79,-1
    { "name": "flamingo_flyA_007", "vertices": [0,68,86,0,16,192,0,-97,-189,0,65,-78,-1
    { "name": "flamingo_flyA_008", "vertices": [0,56,86,0,3,192,0,-111,-189,0,51,-79,-1
    { "name": "flamingo_flyA_009", "vertices": [0,48,85,0,-2,192,0,-121,-189,0,42,-80,-
    { "name": "flamingo_flyA_010", "vertices": [0,48,83,0,-1,191,0,-124,-188,0,41,-81,-
    { "name": "flamingo_flyA_011", "vertices": [0,57,82,0,9,190,0,-118,-187,0,48,-82,-1
    { "name": "flamingo_flyA_012", "vertices": [0,72,81,0,25,190,0,-106,-187,0,61,-83,-
    { "name": "flamingo_flyA_013", "vertices": [0,89,80,0,42,189,0,-92,-186,0,76,-84,-1
    ],                                                                                 

 

morph的意思是变形,3d人物动作基本都是通过变形。看到这里是不是可以理解为,这个模型具有的morphTargets类,下面有多个变形目标,分别是原始mesh'的变形。

就是说,这个3d模型定义了flamingo_flyA_000~flamingo_flyA_014一共14个动作,这样就好理解了,3d就是通过这14个动作的切换来实现。

所以mixer是一个类,这个类可以识别出morphTargets下面的属性,并且具有一些方法,比如上面

mixer.clipAction(geometry.animations[0]).setDuration(1).play();

 

意思就很明显了,clipaction就是切换动作的意思,setduration(1)播放从开始到结束速度设置为1秒(居然是秒为单位),play方法是播放,很好理解,播放动画。

 

虽然整个过程看起来特别简单,定义一个类然后使用类的方法就可以了,但是你的3d模型必须具有morphTargets属性才可以的,也就是说~~

 

在做3d模型的时候,进行变形处理,并将结果保存,一般都是建立骨架然后拖拽什么的就行了,很多软件都可以,不负责任的说,我没试过!!

 

所以说要么自己做3d模型,要么使用现成的,才可以实现任务骨架移动的效果啊。

 

附上链接~

https://github.com/mrdoob/three.js/blob/master/examples/webgl_morphnormals.html

 

 

 

 

 

 

 

 

 

 

 




 

posted @ 2016-07-13 00:12  早一步是财富  阅读(3115)  评论(0编辑  收藏