three.js加载fbx并解析骨骼动画

2021-04-30 14:01:58 阅读：620 来源： 互联网

标签：动画 AnimationAction obj fbx THREE three new js 加载

three.js加载fbx并解析骨骼动画
话不多说，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body {
				margin: 0;
			}
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<!-- 引入fbx模型加载库FBXLoader -->
		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/loaders/FBXLoader.js"></script>
		<!-- 辅助文件 -->
		<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/libs/inflate.min.js"></script>
		<script>
			//创建一个场景
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			//渲染器，若不支持WebGL，可以使用其他进行降级
			const renderer = new THREE.WebGLRenderer();
			/*渲染器的尺寸，setSize中有第三个参数，设为false，
			可以使用比较低的分辨率来渲染*/
			renderer.setSize(window.innerWidth, window.innerHeight);
			//将渲染器的dom元素添加到hmtl文档中
			document.body.appendChild(renderer.domElement);
			var mixer = null; //声明一个混合器变量
			var loader = new THREE.FBXLoader(); //创建一个FBX加载器
			loader.load("Naruto(1).fbx", function(obj) {
				// console.log(obj)
				scene.add(obj)
				obj.translateY(20);
				obj.translateZ(-160);
				// obj作为参数创建一个混合器，解析播放obj及其子对象包含的动画数据
				mixer = new THREE.AnimationMixer(obj);
				// 查看动画数据
				console.log("动画数据", obj.animations)
				// obj.animations[0]：获得剪辑对象clip
				var AnimationAction = mixer.clipAction(obj.animations[23]);
				AnimationAction.timeScale = 0.1; //默认1，可以调节播放速度
				//AnimationAction.loop = THREE.LoopOnce; //不循环播放
				//AnimationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
				AnimationAction.play(); //播放动画
			})
			// 创建一个时钟对象Clock
			var clock = new THREE.Clock();
			// 渲染函数
			function render() {
				renderer.render(scene, camera); //执行渲染操作
				requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧

				if (mixer !== null) {
					//clock.getDelta()方法获得两帧的时间间隔
					// 更新混合器相关的时间
					mixer.update(clock.getDelta());
				}
			}
			render();
		</script>
	</body>
</html>

在这里插入图片描述
obj.translateY(20);
obj.translateZ(-160);
是模型加载的位置，可以做适当调整，官网的数值可能看不到模型，不是没有加载，而是加载的位置你看不到。

"Naruto(1).fbx"是你的文件名。

标签：动画,AnimationAction,obj,fbx,THREE,three,new,js,加载
来源： https://blog.csdn.net/weixin_52648390/article/details/116298350

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

three.js加载fbx并解析骨骼动画