ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

从零开始学习ThingJS之创建App对象

2021-05-28 15:01:27  阅读:150  来源: 互联网

标签:场景 App 从零开始 可视化 ThingJS app 加载


1、 创建App

2、 加载场景

3、 加载地图

数字孪生可视化行业,搭建模型以及3D场景都是让人头疼的事,但是有一个平台解决了这些难题,它就是ThingJS。作为面向物联网的3D可视化开发平台其特点是:简单易学、提升效率、快速搭建、丰富模型、一键部署,前端工程师也能轻松进行数字孪生可视化项目开发。如果你是一位数字孪生可视化的初学者或正打算入门,你可以阅读本文并在我的代码基础之上继续深入学习。

首先登录ThingJS官方网站,注册账户后点击在线开发就可以开始开发我们的数字孪生可视化可视化项目啦!开始的第一个步骤是创建App,下面我就通过创建App开始学习ThingJS。

1、 创建App

App 对象是 ThingJS 库的功能入口,用于 3D 场景初始化。

下面通过创建 App 对象,对 3D 场景进行初始化,此时,App 对象为空。

var app = new THING.App();
 

并通过添加属性名称和属性值,来设置 App 对象属性。

var app = new THING.App({ name: value, });

name 为 App 对象属性的名称。value 为 App 对象属性的值。

2、 加载场景

数字孪生可视化场景可以在CampusBuilder(又称模模搭)或者CityBuilder中创建,园区保存后会自动同步到ThingJS同一账号下。

将下面的代码输入到项目文件中,即可加载ThingJS示例园区。

var app = new THING.App({ url: "models/storehouse/", });

运行项目后,在预览窗口中,可以展示出 ThingJS示例园区,如下图所示。

上述代码中 url: "models/storehouse" 指园区场景数据的地址,此处为选填,该地址可写绝对路径也可写相对路径。当然也可以不输入路径,在你需要的时候通过 app.create 创建园区物体,从而加载园区。

3、加载地图

将下面的代码输入到项目文件中,再把 myMapDirectory 替换为所需加载的地图路径即可,工具栏点击地图可以获得地图路径。通过日志窗口(快捷键Ctrl+1),可查看地图层级数量。

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: 'myMapDirectory',
 complete: function (event) {
 console.log(event.object.userLayers.length);//日志窗口显示地图层级数量
 }
 });
});

通过本文,我们已经了解了如何创建App、 加载园区,加载地图,大家可点击进入ThingJS官网在线开发页面ThingJS - 物联网3D可视化开发平台 - 数字孪生可视化平台,点击查看官方提供的示例,可以独立完成创建数字孪生可视化场景。

标签:场景,App,从零开始,可视化,ThingJS,app,加载
来源: https://blog.csdn.net/ThingJS/article/details/117362106

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有