Three.js 加载的FBX、GLTF模型的动画出错

今天搞了一天,就为了把一个带动画的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,官方就是这么给的
在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值