当前位置: 首页 > 文档资料 > ThingJS 文档中心 >

2.3.1 App 对象

优质
小牛编辑
130浏览
2023-12-01

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

创建 App 对象的语法

下面的代码中,通过创建 App 对象,对 3D 场景进行初始化。

var app = new THING.App();

下面的代码中,创建了 App 对象,并通过添加属性名称和属性值,来设置 App 对象属性。

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

其中,name 为 App 对象属性的名称。value 为 App 对象属性的值。关于常用 App 对象的属性和方法,参阅参考信息

应用示例

下面的子章节中,将详细介绍常用的 App 功能应用示例,如加载场景、加载地图。

加载场景

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

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

其中,models/storehouse/ 为 ThingJS 示例园区的相对路径。

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

关于获取园区资源路径的方法,参阅 ThingJS 在线开发工具栏的查看园区信息部分。

加载地图

将下面的代码输入到项目文件中,再把 myMapDirectory 替换为所需加载的地图路径即可。通过日志窗口,可查看地图层级数量。

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 API 中的核心对象 Class: App

常用 App 对象属性

属性名称类型说明
urlString场景资源路径。一般来说,
- 加载模型或园区时,可使用相对路径或绝对路径,例如 models/storehouse/ 或者 https://www.thingjs.com/static/models/storehouse
- 加载地图时,使用绝对路径。
backgroundString背景颜色或图片, 例如,#FF00FF
skyboxString天空盒资源名称, 例如,BlueSky。
completefunction初始化完成的函数回调。

常用 App 对象方法

方法说明
create()创建物体,如模型、基本形状等。
query()通过 id,name,自定义属性,来搜索模型。
camera()获取摄像机对象。
on()全局绑定事件。多用于绑定 load 事件来通知 App 初始化完成或场景、物体加载完成。关于事件类型,参阅 ThingJS API 命名空间的 EventType

下一个教程中,我们来学习创建/销毁物体