关于three.js加载blender导出gltf格式模型动画要点
研究过一次加载动画后导入three.js场景不执行动画，故此记录原因。
我判断两个方面影响动画生成，一、blender导出模型未生成动画通道 二、代码原因未执行
一、blender 制作动画后应在动画编辑器下推到动画轨道，生成片段，更改名字，导出模型动画文件。
二、three.js加载gltf模型文件和动画后，单独play()播放不能执行动画，需构造时钟clock定义，录入动画执行片段播放，还需做一个循环函数持续调用。代码如下。
function animate() {
requestAnimationFrame(animate);
if (mixer) mixer.update(clock.getDelta());
if (mixer2) mixer2.update(clock.getDelta());
controls.update(); // required if damping enabled
renderer.render(scene, camera);
}
通过鼠标点击移动模型位置不能直接在循环函数中，移动距离回随时间不断变大，要单独开一个函数，代码如下。
function render() {
// renderer.render(scene, camera);
document.addEventListener("mousedown", (event) => {
// 判断是否是右键点击事件
if (event.button === 2) {
if (model.position.x <= 24) {
mixer.clipAction(childAnimation).play();
model.position.x += 0.5;
} else {
model.position.x = model.position.x;
}
}
});
document.addEventListener("mousedown", (event) => {
// 判断是否是右键点击事件
if (event.button === 0) {
if (model.position.x >= -24) {
mixer.clipAction(childAnimation).stop();
//console.log(model.position.x);
//model.position.x -= 0.05;
model.translateX(-0.5);
model.position;
} else {
model.position.x = model.position.x;
}
}
});
}
该函数可持续调用。