ThingJS学习总结
2024-06-02 05:10:30
ThingJS概述
ThingJS 是物联网可视化PaaS开发平台，帮助物联网开发商轻松集成 3D 可视化界面。ThingJS 名称源于 物联网Internet of Things (IoT)中的 Thing (物)，ThingJS 使用当今最热门的 Javascript 语言进行开发。不仅可以针对单栋或多栋建筑组成的园区场景进行可视化开发，搭载丰富插件后，也可以针对地图级别场景进行开发。广泛应用于数据中心、仓储、学校、医院、安防、预案等多种领域。
物联网分为感知层、网络层、应用层。应用层涉及到 3D 界面的开发，对大部分企业来说都有一定挑战。ThingJS 可以极大降低 3D 界面开发的成本。
ThingJS 基于 HTML5 和 WebGL 技术，可方便地在主流浏览器上进行浏览和调试，支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能，只需要具有基本的 Javascript 开发经验即可上手。
ThingJS 提供了场景加载、分层级浏览，对象访问、搜索、以及对象的多种控制方式和丰富的效果展示，可以通过绑定事件进行各种交互操作，还提供了摄像机视角控制、点线面效果、温湿度云图、界面数据展示、粒子效果等各种可视化功能。
ThingJS提供如下相关组件和工具供用户使用：
- CityBuilder：聚焦城市的 3D 地图搭建工具，打造你的 3D 城市地图。
- CamBuilder：简单、好用、免费的 3D 场景搭建工具。
- ThingPano：全景图制作工具，轻松制作并开发全景图应用，实现 3D 宏观场景和全景微观场景的无缝融合。
- ThingDepot：上万种模型，数十个行业，自主挑选，一次制作多次复用。
开发与说明
ThingJS-在线开发
ThingJS说明文档
使用
注意：具体实例可以参考https://www.thingjs.com/guide/?m=sample
APP
新建App
//创建App
var app = new THING.App();
/*
App()中可以放参数url: string; //场景urlcomplete: () => any; //创建App初始化完成后调用success: () => any; //创建App成功后调用error: () => any; //创建App出错后调用background: number; //设置背景skyBox: string; //设置天空盒
*/
其他参数可以参考THING.App
查询
// 查询某类型物体，'.'+类型
var objs = app.query('.Thing');// 查询指定名字物体
var objs = app.query('car01');//根据正则表达式匹配 name 中包含'car'的物体
var cars = app.query(/car/);
// 上行代码等同于
// var reg = new RegExp('car');
// var cars=app.query(reg);// 查询指定属性物体
var objs = app.query('[power=100]');// 搜索名字中包含'car'、并且属性字段userData中马力大于50的物体
var cars = app.query(/car/).query('[userData/power>50]');
事件
//场景加载完成事件
app.on('load',function(){//method
});
其他可用事件，请参考THING EventType
创建物体
// 创建Box
var box = app.create({ type: 'Box', id:'No1234567',name:'box01',width: 1.0, // 宽度height: 1.0, // 高度depth: 1.0, // 深度widthSegments: 1.0, //宽度上的节数heightSegments: 1.0, // 高度上的节数depthSegments: 1.0, // 深度上的节数center:'Bottom', // 中心点style: { color: '#ffffff',opacity: 0.8, image: 'images/uv.jpg' }
});
可创建物体有
| 类别 | 名称 |
|---|---|
| 基本形体 | Box |
| Sphere | |
| Plane | |
| Cylinder | |
| Tetrahedron | |
| 模型物体 | Thing |
| 界面 | UIAnchor |
| Marker | |
| WebView | |
| TextRegion | |
| 粒子效果 | ParticleSystem |
| 线 | Line |
| PolygonLine | |
| RouteLine | |
| 区域 | PolygonRegion |
| 其他 | Heatmap |
控制物体
效果
// 设置物体颜色
obj.style.color = '#ff0000';// 设置物体透明度 0全透明，1不透明
obj.style.opacity = 0.5;// 设置物体勾边
obj.style.outlineColor = '#0000ff';// 渐隐
obj.fadeOut({time: 1000, // 时间 毫秒// 渐隐完成后的回调函数complete: function (ev) {console.log(ev.object.visible);}
});// 渐现
obj.fadeIn({time: 1000,complete: function (ev) {console.log(ev.object.visible);}
});更多效果参考效果
位移/旋转/缩放
// 相对于自身 Z 轴移动
obj.translate([0,0,10]);// 设置物体旋转
// 绕物体自身 X 轴旋转
obj.rotateX(45); // 设置物体缩放
obj.scale = [2, 2, 2];更多控制属性，请参考此文档BaseObject
层级
// 进入层级
app.level.change(obj)// 退出层级
app.level.back()更多层级相关属性，请参考此文档SceneLevel
摄像机
// 设置摄像机位置和目标点
app.camera.position = [-0.7360000000000002,6.385,-0.5190000000000001];
app.camera.target = [3.515,0.01,-6.895];// 摄像机飞行到某位置
app.camera.flyTo({'position': [-0.7360000000000002,6.385,-0.5190000000000001],'target': [3.515,0.01,-6.895],'time': 2000,'complete': function() {}
});
更多摄像机相关，请参考CameraController
界面
var panel = new THING.widget.Panel({template: 'default',// 面板样式 默认 defaultcornerType: "none",// 角标样式 默认 none 无角标width: "300px",// 面板宽度hasTitle: true, // 是否有标题titleText: "我是标题", // 标题内容closeIcon: true,// 是否有关闭按钮dragable: true,// 是否可拖拽retractable: true,// 是否可收起opacity: 0.9,// 面板不透明度zIndex: 99 // 层级
})
更多界面详情，请参考Panel
控件
小地图
// 添加小地图控件
var ctrl = app.addControl(new THING.MiniMapControl({width: 200,height: 200,position: THING.CornerType.RightBottom,opacity: 0.8,scale: 1,angle: 0,mousewheel: true,cameraViewImg: 'https://www.thingjs.com/static/images/minimap1.png',cameraCenterImg: 'https://www.thingjs.com/static/images/minimap0.png',// hasClose: true, // 是否有关闭按钮（默认没有）当点击关闭按钮时，小地图 enable 为 false// closeBtnImg: 'https://www.thingjs.com/static/images/minimap2.png'
}));
指南针
// 添加指南针控件
var ctrl = app.addControl(new THING.CompassControl({'position': THING.CornerType.RightTop, // 选填 默认值 RightBottom 可填写 RightTop LeftTop LeftBottom'opacity': 0.8, // 不透明度'offset': [-25, -25], // 选填 偏移值 x y'image': 'https://thingjs.com/static/images/compass.png','size': 100 // 大小
}));
第一人称行走
// 添加第一人称行走控件
var ctrl = app.addControl(new THING.WalkControl({ // 参数可以动态修改walkSpeed: 0.02, // 行走速度turnSpeed: 0.25, // 右键旋转速度gravity: 29.8, // 物体重量eyeHeight: 1.6, // 人高度jumpSpeed: 10, // 按空格键 跳跃的速度enableKeyRotate: false, // 默认不开启键盘控制旋转useCollision: false, // 默认不开启碰撞检测useGravity: true // 默认开启重力})
);
拾取/选择
// 将对象加入选择集
app.selection.select(obj);
// 将对象拿出选择集
app.selection.deselect(obj);
// 清空选择集
app.selection.clear();
// 判断对象是否在选择集中
app.selection.has(obj);//获取当前帧系统默认拾取的物体集合
var sel = app.picker.objects;
//获取上一帧拾取物体集合
var sel = app.picker.previousObjects;
其他拾取/选择相关，请参考以下文档
引用
引用第三方库
// 以引入 bootstrap 插件为例
THING.Utils.dynamicLoad(['https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js','https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css'],function () {},true, // 选填 是否带时间戳true // 选填 是否按顺序下载)
iframe引用页面
// 界面组件
var panel = new THING.widget.Panel({width:'400px'
});
// 创建绑定的数据对象
var dataObj = {iframeUrl: 'https://www.thingjs.com/guide/'
};
var iframe = panel.addIframe(dataObj, 'iframeUrl').caption('引用页面');
iframe.setHeight('800px');
引用模板
/*** 引用浅色模板* 备注：引用该模板需要传递创建的app对象*/
THING.Utils.dynamicLoad(['/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/SceneTemplate/AppTemplate.js'],function () {init(app, 'default-light')
})
引用音频播放脚本
/*** ******************** 引入音频播放脚本 ********************* 描述：引用该脚本需要传递参数，参数为音频链接数组、id，播放方式，播放次数。* 构造器：new offMusic(srcArr, id, looptype, count)* 参数列表：* 1. srcArr：类型为Array，由音频文件的url组成，音频文件格式支持MP3、Wav、Ogg 三种格式。* 2. id：类型为String，播放器唯一标识。* 3. looptype：类型为String，播放方式有list（列表循环）、single（单曲循环）、random（随机播放）、order（顺序播放）4种。* 4. count：类型为Number，播放次数，其计算方式为：* 列表循环方式下，列表播放完算一次；* 单曲循环方式下，单曲播放完算一次；* 随机播放方式下，播放完一曲算一次；* 顺序播放方式下，列表只播放一次，设置次数不生效。* 方法列表：* play() 播放* pause() 暂停* stop() 停止*/
THING.Utils.dynamicLoad(['https://www.thingjs.com/static/ScenePreview/music/offMusic.js'
],function () {// 创建音频播放器对象var testMusic = new offMusic(['https://www.thingjs.com/static/ScenePreview/music/test.mp3'], 'testMusic', 'list', 1);// 播放testMusic.play();// 暂停// testMusic.pause();// 停止// testMusic.stop();
})
引用地图
//添加一个工具栏
var toolbar = new THING.widget.Panel({ width: '65px', captionPos: 'hover' });
toolbar.position = [10, 10];
//添加一个地图开关
var button = toolbar.addImageBoolean({ map: false }, 'map').caption('地图').url('https://www.thingjs.com/uearth/res/map.png');
button.on('change', function (boolean) {//开关change回调事件showMap(boolean);
});
//控制瓦片图层显示隐藏
function showMap(boolean) {var map;//判断当前是否引用地图插件if (typeof (CMAP) === 'undefined') {//如果没有,则动态引用,建议使用地图的项目参考地球-创建地球的例子中引用地图开发包的方法THING.Utils.dynamicLoadJS(["https://www.thingjs.com/uearth/uearth.min.js"], function () {//加载地图插件//创建一个地图实例map = app.create({type: 'Map',attribution: 'Google',style: {night: false}});//创建一个瓦片图层var tileLayer1 = app.create({type: 'TileLayer',name: '卫星影像图层',// Google 卫星影像服务(火星坐标系)url: 'https://mt{0,1,2,3}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'});// 将瓦片图添加到底图图层中map.addLayer(tileLayer1);// 显示隐藏瓦片图层map.baseLayers.visible = boolean;});}else {//获取当前地图实例map = CMAP.getCurrentMap();// 显示隐藏瓦片图层map.baseLayers.visible = boolean;}
}其他地图相关知识，请参考文档地图
全景图
/*** 直接通过配置数据加载全景图*/// 加载全景图插件
THING.Utils.dynamicLoad('/panooss/pano/js/thing.pano.min.js', function () {// 加载场景var app = new THING.App({// 场景地址"url": "models/uinnova",// 背景设置"skyBox": "BlueSky"});// 场景加载完事件app.on('load', function () {// 设置全景图数据var panoData = {"config": {"panos": [// 第一个全景图的数据{// 全景图ID"panoID": "PUBLIC/a15355465645611000",// 全景图显示的名称"title": "开始",// 矫正全景图相对于正北方向的偏移角度 单位 度"correction": "0",// 全景图的初始视角（horizontal）"startH": "-180",// 全景图的初始视角（vertical）"startV": "0",// 热点"hotspots": [{// 热点名称"name": "spot1",// 跳转到下一张全景图的ID"nextPanoID": "PUBLIC/a15355465645611001",// 热点所在水平位置"h": "180",// 热点所在垂直位置"v": "0"}]},// 第二个全景图的数据{"panoID": "PUBLIC/a15355465645611001","title": "门口1","correction": "0","startH": "0","hotspots": [{"nextPanoID": "PUBLIC/a15355465645611000","h": "0","v": "0"},{"name": "spot1","nextPanoID": "PUBLIC/a15355465645611002","h": "180","v": "0"}]},// 第三个全景图的数据{"panoID": "PUBLIC/a15355465645611002","title": "门口1","correction": "0","startH": "0","hotspots": [{"nextPanoID": "PUBLIC/a15355465645611001","h": "0","v": "0"}]}]}}// 传递全景图数据，打开全景图播放器THING.PanoManager.createPlayer(panoData, {// 是否全屏fullscreen: false,// 悬浮框的位置,放置在右上角location: "right-top",// 相对于location的水平偏移offsetX: 0,// 相对于location的垂直偏移offsetY: 0}, {// 启动时首个加载的全景图panoID: panoData.config.panos[0].panoID,// 初始位置，类似于startHh: 180,// 初始位置，类似于startVv: 0}, null, function () {});})
});更多相关资料请参考全景图
辅助
数字类
//用于坐标相加
THING.Math.addVector([1,2,3],[3,4,5]); // 返回值 [4,6,8]
更多相关资料请参考Mathics
工具辅助类
// 批量转换
var things = app.query('.Thing');
things.forEach(function(obj){THING.Utils.convertObjectClass(obj, 'Bus');
})
更多相关资料请参考Utils
其他知识
世界坐标系
以上均为学习总结，若不够全面请参考https://www.thingjs.com/guide/?m=sample
ThingJS学习总结相关推荐
- 从零开始学习ThingJS之创建App对象
1. 创建App 2. 加载场景 3. 加载地图 在数字孪生可视化行业,搭建模型以及3D场景都是让人头疼的事,但是有一个平台解决了这些难题,它就是ThingJS.作为面向物联网的3D可视化开发平台其特 ...
- js 判断支持webgl_基于WebGL无插件虚拟场景漫游技术如何构建？ThingJS
#三维可视化##3D开发# WebGL, ThingJS及3DSMAX 虚拟场馆漫游技术构建 基础组件 加载三维模型 实现虚拟漫游 渲染优化 如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3 ...
- ThingJS：部署物联网不用买买买，互联互动是切入点
简介:部署物联网,不是让你无止尽地采购和学习新技术,不妨看看企业早就拥有的设备,形成互联互动 部署物联网,不是让你无止尽地采购和学习新技术,不妨看看企业早就拥有的设备,形成互联互动,ThingJS一直 ...
- js判断是否支持webgl_基于WebGL无插件虚拟场景漫游关键技术（完全版）ThingJS
#三维可视化##3D开发# WebGL, ThingJS及3DSMAX 虚拟场馆漫游技术构建 基础组件 加载三维模型 实现虚拟漫游 渲染优化 如果要构建一个具有交互性和拓展性的沉浸式漫游场景,常用到3 ...
- 3D仿真教程：ThingJS全套环境搭建方案
在现实世界中,所有物体都不是独立存在的,周围都存在相应环境,常见的环境元素有雨.电.风.光束等,都是3D仿真的主要对象.ThingJS提供了全套环境搭建方案. 如何控制环境与效果?ThingJS 提供 ...
- WebGL探索——抉择：实践方向（twgl.js、Filament、Claygl、BabylonJS、ThreeJS、LayaboxJS、SceneJS、ThinkJS、ThingJS）
WebGL探索--抉择:实践方向,twgl.js.Filament.Claygl.BabylonJS.ThreeJS.LayaboxJS.SceneJS.ThinkJS.ThingJS 跨出第一步 新 ...
- 从零开始学习3D可视化之坐标系
1. 世界坐标系 2. 父物体坐标系 3.自身坐标系 要想控制一个3D可视化对象的空间位置,首先需要理解空间坐标系.在 ThingJS 开发平台中,使用右手坐标系,横轴为 X 轴和 Z 轴,竖轴为 Y ...
- 搭建三维城市建模之开发视角，10万场景资源+用户样例 3D 地图 可视化 ThingJS
网络三维电子地图不仅通过直观的地理实景模拟表现方式,ThingJS为用户提供地图查询.出行导航等地图检索功能. **首先要明确概念,什么是三维建模?**用技术的话来解释,三维城市建模做的就是建设&qu ...
- 如何利用ThingJS开发物联网可视化小Demo？
如何利用ThingJS平台制作一个3D可视化应用并且发布出去?怎么去制作一个简单的可视化入门项目?如何判断自己能不能进军3D可视化行业?多说不练假把式,今天我们就来学习ThingJS平台中的官方示例, ...
- java入门 慕路径,Java入门基础知识总结学习教程大全【必看经典】
类型的表达式,是循环条件,表达式3是党执行了一遍循环之后,修改控制循环的变量值. ??? for语句的执行过程是这样的:首先计算表达式1,完成必要的初始化工作:然后判断表达式2的值,如果表达式的值为t ...
最新文章
- 关于Silverlight_Tools.exe安装不上的问题
- android+单利模式中传递context,Android的Context详解
- 考考大家的数学，计算以下计算公式的结果
- 快手二面：引入RabbitMQ后，你如何保证全链路数据100%不丢失？
- 关于“WireX Botnet”事件Android样本分析报告
- 设计模式之_Iterator_06
- 面试刷题29:mysql事务隔离实现原理？
- mybatis 遍历map_Mybatis 缓存系统源码解析
- python memory-management
- 【干货】python多进程和多线程谁更快
- oracle数据块坏,Oracle数据块损坏解决办法
- ArcGIS模型操作
- 为什么用preparedStatement 而不是statement
- 【Codecs系列】颜色空间转换CSConvert：YUV422P转YUV422SP(NV16)
- NK细胞培养方法与优化解决方案
- 公网IP地址获取：移动网络IP、Wifi IP
- python里面snip什么意思_文献检索里面SJR是什么，SNIP指标是什么
- revit二开之过滤族(Family)
- java程序员拜年代码_程序员的新年祝福是什么样的？
- javascript数组——新建数组、访问数组、遍历数组的方法、数组对象的方法、冒泡排序算法、json的正反序列化