700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 关于three.js加载blender导出gltf格式模型动画要点

关于three.js加载blender导出gltf格式模型动画要点

时间:2023-02-21 16:23:23

相关推荐

关于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;

}

}

});

}

该函数可持续调用。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。