ThingJS学习总结

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; //场景url
    complete: () => 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',// 面板样式 默认 default
  cornerType: "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,
			// 初始位置，类似于startH
			h: 180,
			// 初始位置，类似于startV
			v: 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