ThingJS官方示例(八):3D多边形区域交互开发之5个注册事件
2021-01-11 16:27
597 查看
前言
如果要在数字场景中划定一个虚拟范围,可以创建多边形区域(圆形、方形、不规则形状),定义范围接口;而创建区域范围并设置了其位置之后,可以针对范围的内容执行很多种操作,从而实现对数字孪生对象更精细的交互控制, 更多demo可以点击这里注册查看!
创建区域范围
ThingJS使用button属性创建区域范围,无论是圆形、方形或者多边形,都需要定义区域的世界坐标,来构成区域形状的点位置,同时加入区域颜色、边框颜色、透明程度,开启拖拽模式,不到15行代码,就能够轻松生成!
new THING.widget.Button('创建方形区域', function () { // 构成多边形的点(取世界坐标系下的坐标) var points = [[0, 0, 0], [10, 0, 0], [10, 0, 10], [0, 0, 10]]; if (region02 != null) return; // 创建方形区域 region02 = app.create({ type: 'PolygonRegion', id: 'polygonRegion02', points: points, // 传入世界坐标系下点坐标 style: { regionColor: '#9F35FF', // 区域颜色 lineColor: '#9F35FF', // 边框颜色 regionOpacity: 0.3 // 不透明度 (默认是 0.5 半透明) }, }) region02.draggable = true; // 开启拖拽 })
注册事件开发
ThingJS利用鼠标注册事件,包括鼠标移动事件mousemove、鼠标键按下事件mousedown、鼠标键抬起mouseup、鼠标键离开mouseleave、鼠标键划入mouseenter等等5个属性完成以注册时间为主的开发方式。
以创建圆形为示例,鼠标的交互开发更加直观,有效提升开发效率。
拉伸前
拉伸后
从上图可以看到,鼠标的标志在区域内、区域外、区域边缘都是不一样的,区域内可以进行拾取等操作,区域边缘则可以利用鼠标键抬起mouseup进行范围拉伸。
// 注册鼠标划入区域后鼠标键抬起事件 app.on('mouseup', function (ev) { if (ev.button == 0) { app.resumeEvent('mousemove', null, '监听鼠标位置事件'); app.resumeEvent('mouseenter', '.PolygonRegion', '鼠标划入区域事件'); if(stretchState == true){ app.off('mousemove', null, '圆形区域拉伸事件'); $(document.body).css('cursor', 'default'); }else{ $(document.body).css('cursor', 'grab'); } } }, '鼠标划入区域后鼠标键抬起事件'); }, '鼠标划入区域事件');
不同的区域范围由一个Button类型的示例表示,其实展现的都是差不多的属性和方法,包括点坐标、style属性和鼠标注册事件,复制创建更简单!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
关于ThingJS
优锘ThingJS平台提供物联网3D可视化组件,让3D开发更轻松!直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑,一站式项目开发服务(场景搭建-3D脚本开发-数据对接-项目部署)更是吸引了20万开发者入驻,成为数字孪生技术创新者!魔豆花花活动ing,欢迎点击进入官网>>
相关文章推荐
- ThingJS官方示例:7天学会管线3D可视化开发
- 初学WebGL,使用Three.js开发第一个3d场景示例
- 【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍 与 入门示例
- js框架开发之旅--事件三
- Ios开发之 -- js和ios的交互
- Android官方开发文档Training系列课程中文版:手势处理之ViewGroup的事件管理
- 利用three.js画一个3D立体的正方体示例代码
- js动态添加事件并可传参数示例代码
- 【cocos2d-js官方文档】十七、事件分发机制
- 【Android游戏开发之五】游戏注册界面Demo-实现两个Activity之间的切换与数据交互!
- js和jquery实现监听键盘事件示例代码
- HTCVive VR开发场景事件交互指南
- Android 开发之 WebVIew 与 JS 交互
- js 注册事件对象
- js高级——注册事件的兼容性处理
- 【cocos2d-js官方文档】一、搭建 Cocos2d-JS 开发环境
- JS注册事件 JS:attachEvent和addEventListener 使用方法
- 【安卓深度控件开发(1.2)】Creating Custom Views (官方示例文档汉化版)(2)
- Android开发使用json实现服务器与客户端数据的交互功能示例
- js中事件的处理与浏览器对象示例介绍