插件安装
本插件为TVT.js平台深度定制开发的源码包,如需在其他平台集成使用,建议进行适配性调整以实现最佳兼容效果。
1、点击右侧插件包下载,得到: 'animationEditor.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`
2、请使用命令终端,自行定位到您电脑的目录
cd /icegl-three-vue-tres/
3、输入命里,安装插件
yarn plugin.marker install animationEditor
4、启动预览模式即可:
yarn pre.dev
插件介绍
视频预览:
清晰版跳转 B站查看详情
首先当时是在线使用地址:
animationeditor.icegl.cn
插件依赖库: gif.js.optimized
请导入插件后,命令行增加:yarn add gif.js.optimized
1. 模型管理
(1)导入模型:支持导入 GLB 3D 模型文件
(2)模型缓存:使用 localforage 本地存储缓存导入的模型,刷新页面后可自动恢复
(3)模型解析:自动解析模型中的动画配置。
2. 动画类型(5种)类型 说明
(1)平移 (translate) 沿 X/Y/Z 轴平移,可设置距离
(2)旋转 (rotate) 沿 X/Y/Z 轴旋转,可设置角度
(3)显隐 (visibility) 控制模型显示/隐藏(透明度渐变)
(4)视角 (camera) 相机动画,记录相机位置和朝向
(5)消融 (dissolve) 模型消融效果动画
3. 时间轴编辑(1)可视化时间轴:底部面板展示所有动画项
(2)属性编辑:支持修改开始时间、持续时间、方向、距离/角度
(3)实时预览:拖动时间轴可实时查看动画效果
(4)动画排序:按时间顺序排列,支持删除单项
4. 播放控制(1)播放/暂停:底部工具栏控制动画播放
(2)重置:一键重置所有动画到初始状态
5.工具箱(1)屏幕截图