共计 1411 个字符,预计需要花费 4 分钟才能阅读完成。
1、获取模型动画
2、播放模型动画
3、进行播放模型动画
在搭建 3D 可视化场景的过程中,我发现很多模型都有内置动画,很多模型在制作阶段就内置了动画,如果模型有内置动画,能够在 ThingJS 中利用 API 调用播放这些动画。
比方官网示例中通过 dbclick 事件来管制机柜开启,click 事件来管制鼠标右键敞开机柜。
1、获取模型动画
首先通过 animationNames 属性获取 3D 可视化模型都带有有什么动画。
console.log(obj1.animationNames); // 日志窗口中输入模型 obj1 所带有的动画
CampusBuilder 模型库中的模型,有的是也是带有动画的,如机柜、人、动物等。能够通过查看 CampusBuilder 中模型的属性,来理解模型是否带有动画。
2、播放模型动画
应用 playAnimation 接口进行动画播放。加载 3D 可视化园区后,我在 3D 可视化园区内搁置一个机柜来举例,比方给机柜设置开启动画。循环播放动画,通过 loopType,来管制循环类型,比方上面我举例的机柜开门动画。
机柜模型开门动画代码十分的简略,代码如下:
/**
* 创立机柜模型并播放 open1 动画
*/
function playAnim() {reset();
$('.warninfo3').text("创立机柜模型并播放机柜开门动画(open1)");
cabinet = app.create({
type: 'Thing',
name: '机柜',
url: 'https://www.thingjs.com/static/models/cabinets/47f34ce2c5a14b6d8fd4e80974394a55',
position: [0, 0, 0],
angles: [0, 0, 0],
complete: function () {$('.warninfo3').text("机柜创立实现,点击即可播放开门动画(open1)");
cabinet.on('click', function (ev) {
// 察看某物体
app.camera.fit(cabinet);
cabinet.playAnimation({
name: 'open1',
// 循环类型
// THING.LoopType.Repeat 一直循环
// THING.LoopType.PingPong 往返循环
loopType: THING.LoopType.no, // 不循环
});
});
}
})
}
也能够反向播放模型动画。obj.playAnimation("animation");
还能够同时播放多个动画;
obj.playAnimation({name: ["open1", "open2"],
loopType: THING.LoopType.PingPong,
speed: 0.4
});
3、进行播放模型动画
应用 stopAnimation 接口来进行动画播放。
// 当物体带有多个动画时,`stopAnimation` 接口将会进行所有动画播放
obj.stopAnimation();
// 指定进行哪个动画
obj.stopAnimation("open1");
模型动画是 3D 可视化 我的项目开发中的重要组成部分,我本人不会应用 3D 软件建模所以间接应用 ThingJS 模型库中的模型,对于没有建模师的团队来说十分不便。模型动画技术的正当应用,能够让 3D 可视化场景更加活泼,交互成果更优,学会设置模型动画后就能够持续 3D 可视化我的项目的后续开发了。