3D标记“Marker”动效可视化

物联网3D可视化场景中，经常用到标注元素作为线路标绘、业务区域标绘，比如定位物联网设备或危险源位置，进行安全作业或者路径导航规划，远程解决难题。

ThingJS的3D标记“Marker”，往往用于顶牌，有两个主要作用：

1. 传入div, image或canvas写文字，展现在3D场景中或绑定在3D物体上；
2. 添加一个图片放置到你希望的位置，作为孩子添加到对象身上，随着对象一同移动。

注意，标记Marker受距离远近影响，呈现近大远小的 3D 效果，也会在 3D 空间中实现前后遮挡。

功能列表更新Marker动画模式，实现跳跃、闪烁、发光等物体效果，可以利用ThingJS 3D源码来开发，体验动手的乐趣！

官方示例查看地址>>

以跳跃动画为例：

1. // 创建文字+图片标注
2. createElement("textAndPictureMarker");
3. // 创建普通图片标注
4. createElement("pictureMarker");
5. // 创建文字标注
6. createElement("textMarker");
8. // 跳跃动画
9. new THING.widget.Button('跳跃动画开启', function () {
10. // 获取按钮value值，进行改变
11. var posInfo = document.querySelectorAll("#widget_root input");
12. if (posInfo[1].value == "闪烁动画关闭") {
13. posInfo[1].value = "闪烁动画开启";
14. }
15. if (posInfo[2].value == "关闭发光") {
16. posInfo[2].value = "图片标注发光";
17. }
19. // 如果闪烁动画/图片标注发光开启中，先关闭闪烁动画/图片标注发光，再开启跳跃动画
20. $('.textAndPictureMarker').removeClass('scaleAnimation');
21. $('.pictureMarker').removeClass('scaleAnimation');
22. $('.textMarker').removeClass('scaleAnimation');
23. $('#box').css('display', 'none');
25. // 跳跃动画开启/关闭
26. if (posInfo[0].value == "跳跃动画开启") {
27. $('.textAndPictureMarker').addClass('moveAnimation');
28. $('.pictureMarker').addClass('moveAnimation');
29. $('.textMarker').addClass('moveAnimation');
30. posInfo[0].value = "跳跃动画关闭";
31. } else {
32. $('.textAndPictureMarker').removeClass('moveAnimation');
33. $('.pictureMarker').removeClass('moveAnimation');
34. $('.textMarker').removeClass('moveAnimation');
35. posInfo[0].value = "跳跃动画开启";
36. }
37. })

复制代码