thing JS笔记

1. 创建场景

// 加载ThingJS示例园区
var app = new THING.App({// 场景地址url: 'https://www.thingjs.com/static/models/factory',  // 场景地址// 背景颜色background: '#000000',// env: 'Seaside',// 天空盒子skybox： 'BlueSky',
});

2. 加载地图

var app = new THING.App(); // 3D场景初始化app.background = [0, 0, 0]; // 设置场景背景为黑色//引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {app.create({type: 'Map',// 加载的地图路径url: '',// 初始化完成的函数回调complete: function (event) {console.log(event.object.userLayers.length);//日志窗口显示地图层级数量}});
});

3. 创建和销毁物体

var app = new THING.App({skyBox: "BlueSky",
}); // 3D场景初始化，设置天空盒// 添加ThingJS示例园区
var campus1 = app.create({// 物体类型type: "Campus",// 物体资源的路径url: "models/factory",// 在世界坐标系下的位置，系统默认位置为 [0, 0, 0]position: [0, 0, 0],id: 11,name: 'name',// 物体加载完成后的回调complete: function (ev) {console.log("Campus created: " + ev.object.id);}
});//添加粮仓园区
var campus2 = app.create({type: "Campus",url: "models/silohouse",position: [50, 0, -150],complete: function (ev) {console.log("Campus created: " + ev.object.id);}
});// 创建多个物体// 创建按钮，点击按钮可销毁物体
var button = new THING.widget.Button('销毁物体', function() {obj.destroy();
});// 创建Marker且添加点击事件
app.create({type: 'Marker',parent: build,inheritScale: false,element: _this.create_element(build),// scale: [1, 1, 1],localPosition: [0, 8, 0],pivot: [0.5, 1] //  [0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
}).on("click", function() {console.log(12345678)
});

4. 通过load事件加载园区

app.on('load', function (ev) {//获取园区对象var campus = ev.campus; // 获取园区下的建筑对象var buildings = campus.buildings;
})

5. 按属性查询物体

app.on('load', function () {new THING.widget.Button('按id查询', queryById);new THING.widget.Button('按物体类型查询', queryByType);
new THING.widget.Button('按自定义属性', queryBySelf);
});// 搜索id为2271的物体，点击按钮后更改物体颜色
function queryById() {var car = app.query('#2271')[0];car.style.color = '#ff0000';
}// 查询物体类是 Thing 的对象
function queryByType() {var car = app.query(".Thing");car.style.color = '#ff0000';
}
// 查询物体类是 自定义属性=值 的对象
function queryBySelf {var car = app.query('["userData/floorNum"=6]');car.style.color = '#ff0000';
}

6. 父子属性

app.on('load', function (ev) {//获取园区对象var campus = ev.campus; // 通过场景的父子树访问对象var children = campus.children;for (var i = 0; i < children.length; i++) {console.log("children ", children[i])}
})

7. 分类属性

app.on('load', function (ev) {// 获取园区对象var campus = ev.campus;// 日志窗口中显示园区内的 Thing 物体campus.things.forEach(function (thing) {console.log('Thing: ' + thing.id);});
})

8. 双击不进入楼层

// 暂停楼层的双击事件
app.pauseEvent("DBLClick", ".Floor");// 恢复楼层的双击事件
app.resumeEvent("DBLClick", ".Floor");

9. 进入建筑

app.on(THING.EventType.EnterLevel, '.Building', function (ev) {console.log("ev", ev)ev.levelPath[0].style.color = "#009900";
})

10. 进入园区

app.on(THING.EventType.EnterLevel, '.Campus', function (ev) {// var current = ev.current;  // 当前层级
})

11. thingJS 分享链接

thing JS笔记相关推荐

js笔记（一）js基础、程序结构、函数
大标题小节一.js 基础 1. javascript的组成: 2. 运行js: 3. 打印信息: 4. 关键字var: 5. js中的数据类型: 6. NaN(not a number): 7. ...
Vue.js笔记(一)
Vue.js笔记(一) 读书笔记 Vue.js介绍内容概要 1.1 站在巨人的肩膀上 1.1.1 MVC模式 1.1.2 MVVM模式 2.1.3 异步执行脚本 2.1.4 动态加载脚本 2.2 行 ...
Node.js笔记：SerialPort（串口）模块使用（基于9.x.x）
文章目录目的模块安装基础使用扫描端口打开端口发送数据接收数据错误处理数据解析器 SerialPort类构造方法属性事件方法命令行工具总结目的上位机与各种电路模块间常常 ...
node.js笔记第一天
nodejs笔记 web服务器和服务端js的区别 1.js都是运行在浏览器的 ECMAScript:js语法 bom:浏览器对象模型,用js去操作浏览器窗口 Dom:文档对象模型,用js去操作dom树 ...
js笔记十:vscode代码提示(20211221补充)
对于开发过程中,如果有函数或属性提示,可以大大提高效率.对于java,python,C#等语言强类型的编译型脚本语言,其对应的IDE都有完备的代码.对于C++/C也有比较完善的代码提示,而js和lua ...
JS笔记 | JS中的strict model(严格模式)
仅做笔记分享,如有错误请高手指出 ECMAscript5中引入了strict model.严格模式下的JS程序需要比非严格模式下的程序更加规范.严格模式对语法做了比较严格的要求, 变量上的不同 mes ...
11、JS笔记-内置对象
1.内置对象 js中对象分为三种: 自定义对象.内置对象.浏览器对象(js独有) 内置对象: js语言自带的对象,供开发者使用,提供一些常用或基本的功能(属性和方法) 2.Math对象 Math中所有 ...
js笔记2（字符串方法）
20190713 阅读http://www.w3school.com.cn/index.html笔记 js字符串方法 1.1查找字符串中的字符串 indexOf() 方法返回字符串中指定文本首次出现的 ...
前端三板斧: HTML+CSS+JS笔记摘自b站狂神说
参考b站狂神说的前端视频,做的笔记视频地址:https://www.bilibili.com/video/BV1x4411V75C HTML 5 什么是HTML? hyper text markup ...
require.js笔记
笔记参考来源:阮一峰 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html 1. 浏览器端的模块只能采用"异步加载& ...

thing JS笔记

thing JS笔记相关推荐

最新文章

热门文章