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"是你的文件名。