WEBGL学习笔记（五）：让三维模型动起来

时间：2024-02-17 15:55:04

 

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

 

 

 

加载时候会黑屏，等待数秒即可，点击这里体验试玩：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

 

 

 

 

 

 

 

 

 

 

 




 

相关文章