实现3d图片移动_ThingJS官方示例(三):3D标记Marker动效定制化
物联网3D可视化场景中,经常用到标注元素作为线路标绘、业务区域标绘,比如定位物联网设备或危险源位置,进行安全作业或者路径导航规划,远程解决难题。
ThingJS的3D标记“Marker”,往往用于顶牌,有两个主要作用:
- 传入div, image或canvas写文字,展现在3D场景中或绑定在3D物体上;
- 添加一个图片放置到你希望的位置,作为子物体添加到父对象身上,随着对象一同移动。
注意,标记Marker受距离远近影响,呈现近大远小的 3D 效果,也会在 3D 空间中实现前后遮挡。
功能列表更新Marker动画模式,实现跳跃、闪烁、发光等物体效果,可以利用ThingJS 3D源码来开发,体验动手的乐趣!
以跳跃动画为例:
// 创建文字+图片标注 createElement("textAndPictureMarker"); // 创建普通图片标注 createElement("pictureMarker"); // 创建文字标注 createElement("textMarker"); // 跳跃动画 new THING.widget.Button('跳跃动画开启', function () { // 获取按钮value值,进行改变 var posInfo = document.querySelectorAll("#widget_root input"); if (posInfo[1].value == "闪烁动画关闭") { posInfo[1].value = "闪烁动画开启"; } if (posInfo[2].value == "关闭发光") { posInfo[2].value = "图片标注发光"; } // 如果闪烁动画/图片标注发光开启中,先关闭闪烁动画/图片标注发光,再开启跳跃动画 $('.textAndPictureMarker').removeClass('scaleAnimation'); $('.pictureMarker').removeClass('scaleAnimation'); $('.textMarker').removeClass('scaleAnimation'); $('#box').css('display', 'none'); // 跳跃动画开启/关闭 if (posInfo[0].value == "跳跃动画开启") { $('.textAndPictureMarker').addClass('moveAnimation'); $('.pictureMarker').addClass('moveAnimation'); $('.textMarker').addClass('moveAnimation'); posInfo[0].value = "跳跃动画关闭"; } else { $('.textAndPictureMarker').removeClass('moveAnimation'); $('.pictureMarker').removeClass('moveAnimation'); $('.textMarker').removeClass('moveAnimation'); posInfo[0].value = "跳跃动画开启"; } })
官方示例查看地址>>
实现3d图片移动_ThingJS官方示例(三):3D标记Marker动效定制化相关推荐
- 三看 SVG Web 动效
CSS3 动效玩腻了吗?没关系的,我们还有 SVG. Welikesmall 是一个互联网品牌宣传代理,这是我见过的最喜欢使用 SVG 做动效的网页设计团队.事实上,越来越多的网页动效达人选择在 SV ...
- 如何做成gif动画图片?教你简单三步制作gif动图
随着网络的发展,从一开始的流行长图.视频.短视频到现在的gif动图,越来越方便.现在越来越多的行业也开始使用gif动图来做营销.那么,自己如何制作gif动图呢?很简单,使用[GIF中文网]-gif制作 ...
- 官方示例(十):网页开发3D粒子系统实现降雨效果 ThingJS
简介:气温的变化会带动水汽条件的变化,带来降雪.降雨.降冰雹等奇异的天气现象,不仅仅是人的活动会受到影响,物联网设备管理.传感器监测及安全作业都要相应调整. 为了提前准备好预案工作,3D孪生场景的仿真 ...
- 微软SQLServer官方示例项目部署-数据引擎和分析服务部分
微软SQLServer每个版本都会带有相应的示例项目,从2000时的Foodmart到2005之后的Adventure Works,里面的设计方法和规范都有很多我们值得学习的地方.不仅是做普通的开发, ...
- OpenCV4探索学习:OpenCV-4.1.0 Samples官方示例说明
打开文件夹"...\ opencv-4.1.0\opencv\sources\samples".可以发现包含各种语言的示例,这里针对cpp. 在目录该目录下,我们发现CMakeLi ...
- Android之——史上最简单最酷炫的3D图片浏览效果的实现
转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量 ...
- html5游戏引擎phaser官方示例学习
为什么80%的码农都做不了架构师?>>> phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里. 目前把官方的完整游戏示例看了一 ...
- 【Android 热修复】运行 Tinker 官方示例 ( 处理 TINKER_ID 问题 | 编译 debug 包 | 修改 Gradle 脚本 | 生成 patch 包 | 热修复 )
文章目录 一.下载官方示例源码 二.处理 TINKER_ID 问题 三.编译 debug 包 四.安装 APK 并运行 五.修改 Gradle 构建脚本中的文件名称 六.修改程序逻辑代码 七.生成 p ...
- java Socket Tcp示例三则(服务端处理数据、上传文件)
示例一: package cn.itcast.net.p5.tcptest; import java.io.BufferedReader; import java.io.IOException; im ...
最新文章
- 基于GPU加速全局紧耦合的激光-IMU融合SLAM算法(ICRA2022)
- 干货 | 万字长文全面解析GraphQL,携程微服务背景下的前后端数据交互方案
- JAVA I/O 字符输出流简要概括
- PHP实现图片马赛克效果
- Winsock网络编程快速入门
- 一步步编写操作系统 28 cpu乱序执行
- vmware workstation 关于三种网络连接方式的理解
- Node.js: 认识流stream
- 【Oracle】ORA-00054: resource busy and acquire with NOWAIT specified or timeout expired
- python中tkinter模块_使用Python中的tkinter模块作图的方法
- 窗台上晒了一本书,三个人问了三个问题
- @click.native.prevent
- CATIA二次开发—参数那点事
- 2019年系统分析师考试总结
- 布局万花筒:UIColletionview
- 如何解决电脑桌面图标显示为空白文件?
- Sublime——让SublimeText换行的时候不拆散一个单词或者代码
- 学计算机的要起一个群名,吸引人的学生群名字
- 智能车浅谈——抗干扰技术软件篇
- Unity 识别左右手的方式总结
热门文章
- python 去除str的引号 去除括号_Python基础教程:运算符以及数据类型解析
- 基于道路标线的城市环境单目定位
- 【常用】细数那些常用的linux命令(只针对更新前端代码、上传文件到linux服务器)
- 在CentOS 6.6 64bit上安装Python 3.5.0
- Notepad++ 列操作
- 2016-2022年AutoCAD起重机吊装计划和索具图纸
- powershell真香
- Vue 框架-02-事件:点击, 双击事件,鼠标移上事件
- 无参数的lambda匿名函数
- 我的JavaScript学习笔记