时间不再浪费评估上!ThingJS 3D可视化开发不用愁

时间:2022-07-22
本文章向大家介绍时间不再浪费评估上!ThingJS 3D可视化开发不用愁,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

ThingJS,用JavaScript去开发三维可视化场景!

想立即开始您的项目,而不是把时间浪费在评估各种开发工具,担忧实现效果不理想? ThingJS凭借各种内置的开发者工具以及对语言和框架开箱即用的支持,提供高效 JavaScript 开发3D可视化项目所需的一切!

ThingJS启动后创建核心对象APP

ThingJS的核心对象APP创建方法如下:

1

var app = new THING.App();

加载园区场景

这个是核心对象的创建方法,具体还有加载园区的方式,通过URL的方式将园区加载至ThingJS中:

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

其中的URL则是我们的场景地址,此处为选填,该地址可写绝对路径也可写相对路径。有人可能会疑惑这个地址怎么来的?只需要通过Ctrl + J 这个快捷键或者直接点击园区按钮,双击即可自动生成核心对象APP以及相关URL,图示如下:

当然也可以不输入路径,在你需要的时候通过 app.create创建园区物体,从而加载园区,代码示例如下:

var app = new THING.App();
var obj = app.create({
 type: "Campus",
 url: "models/storehouse/",
 complete: function() {
 console.log("Campus created: " + this.id);
 }
});

加载地球场景

除了园区的加载,地球的加载又是不同的代码,但是使用起来是一模一样的, 使用Ctrl + K 或者是直接点击地图按钮,双击地图即可引用对应场景,图示如下:

地图与园区在引用上还有些不同,地球需要使用到此插件。

https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js

具体引用方法如下:

// 加载地图
var app = new THING.App();
// 设置app背景为黑色
app.background = [0, 0, 0];
// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.7.2.js'], function () {
 app.create({
 type: 'Map',
 // 地图场景名:test
 url: 'https://www.thingjs.com/citybuilder_console/mapProject/config/TkRBd01ERT1DaXR5QnVpbGRlckAyMDE5',
 complete: function (event) {
 console.log(event.object.userLayers.length);
 }
 });
});

其中URL则是我们通过CityBuilder搭建的3D城市地图场景了,那么是否能够既显示园区场景又显示三维城市地图场景呢?这个是需要方法控制的,如果直接两个合在一起,需要用到ThingJS场景切换功能。

快速启动ThingJS开发平台,便捷开发3D可视化功能、最后能完整进行在线或离线部署——ThingJS步步紧跟潮流,提供领先的3D可视化开发技术,每一步都不用愁!