今天搞了一天,就为了把一个带动画的FBX用three.js搞到网页上,写写代码,运行一下,上午很容易就把模型加载到网页上了,动画是自动循环播放的,这一看,很棒,一切开始于我不小心瞟了动画一眼,动画是有人问题的Σ(っ °Д °;)っ!!!(先是FBX模型动画遇到的问题,后面是GLTF遇到的一个问题)
从3dmax导出的FBX,用Windows自带的3D浏览器查看都是没有问题的,加载到网页上怎么就出问题了,然后我开始了漫长的探索:
从3dmax入手,打成组的动画是正常的,单独出来的带动画的物体的出错的,要么不动,要么位置错了,我尝试了好多种,把谁和谁为一组,结果一次不如一次,我有心想不用FBX了,把FBX转成GLTF去搞,fbx2glrf也用了,gltf有了,加载的时候报错了,报的错查不到方法解决,上午结束
下午继续,我开始去追求本源( ̄ ‘i  ̄;),我用的max文件不是我自己做的,之前导入unity会出现一个问题,整体旋转之后,动画就错了,刚开始我没有想的这么深,依旧重复在谁和谁一组的问题上,总之,最后,全部拆开之后,动画用肉眼看起来没有大问题的,可是机械之间的关联运动我是直接打的关键帧,感觉加载到网页之后,不协调感增大了,他们之间的错位严重了,虽然范围也不是很大, 但我感觉和在max里还是有差异的,FBX可太难搞了,我准备细化一下动画,加一些辅助物体、约束,达到完美的运动效果,同时我也担心着这些辅助物体在加载到网页之后会不会还在、它们的约束会不会就没了,硬头皮干吧,果然,完美动画加载到网页–没变化~还是抖动厉害,奇怪,最最后,我随手来了一手全部物体成组,试了一下,绝了,网页上也加载出完美动画了,然而还是没总结出导出FBX的套路0.0
盖子转带动栓一起完美运动的方法:
盖子转动,是一个圆形的运动轨迹,手动K是不完美的,加了两个辅助物体,第一个,和盖子同轴,直接给他转动90°,这样这个辅助物体1号和盖子是完美同步的,再来一个辅助物体2号,它要给栓提供注视约束和位置约束,它是辅助物体1的子物体,它要和栓在同一个平面,注视约束,物体所注视的是其他物体的轴心,
GLTF模型加载动画的问题
GLTF模型来自于FBX的转换,下载一个windows-fbx2gltf.exe,把fbx文件拖到它上面就可以,就会生成一个xxx_out的文件夹,_out里面是GLTF和一个.bin文件,不要忘记.bin也放到资源里
之前试过一个加载GLTF模型,那个模型是不带动画的,很轻松就成功了,这次这个带动画,遇到了一点问题,浏览器控制台报错,模型里凡是动画要动的部件,
先贴一下最后成功的代码:
//GLTF加载盖子和动画
var loaderGltf=new THREE.GLTFLoader();//模型加载器.最后的斜杠不能少
loaderGltf.load("models/gaiziGltf/gaizi2.gltf",function(gltf){
console.log("盖子.gltf加载完成");
mixer = new THREE.AnimationMixer( gltf.scene);
//创建动画播放器
var action = mixer.clipAction( gltf.animations[ 0 ] );
//action.setDuration = 4;//设置这一个动画的持续时间(没用)
action.timeScale=0.8//24帧每秒变为30帧每秒,要慢放为0.8倍,做动画要做30帧/s的
//调用播放器的播放事件
action.play();
gltf.scene.scale.set(50,50,50);
gltf.scene.position.set(-300,25,-200);
scene.add(gltf.scene);
});
失败的原因在于,mixer = new THREE.AnimationMixer( gltf.scene);这句,我之前是(gltf),现在我还没懂为什么要.scene,官方就是这么给的