创建/销毁物体
在 3D 场景初始化后,我们可以通过 create() 方法来创建物体,例如,加载模型、添加标记、创建基本形体等。我们还可以通过 create() 方法来加载园区,例如,添加多个园区。通过 destroy() 方法,可以销毁物体,即在场景中删除物体。
创建物体的语法
下面的代码中,通过 create() 方法创建物体,并通过对象名称和属性,来添加所创建的物体属性。
var obj = app.create({
name: value,
})
关于 create() 方法的属性信息,参阅常用 create() 方法属性。
销毁物体的语法
下面的代码中,通过 destroy() 来销毁物体。
obj.destroy();
应用示例
下面的子章节中,将详细介绍常用的 create() 方法的应用示例,如加载模型、添加标识、添加多个园区等。
加载模型
将下面的代码输入到项目文件中,即可加载模型。本例中,我们将加载一个货车。
这里,需要说明的是:我们通过最后一行代码设置摄像机的位置,来调整预览视角。如果不添加此行代码,则默认状态下摄像机的位置跟所创建的物体一致,也就是说摄像机的镜头贴在物体上,那么,此时我们可以将鼠标滚轮回滚,进行缩放调节,这样就可以在预览窗口显示出所加载的模型了。
var app = new THING.App(); // 3D场景初始化
app.background = '#F0FFFF'; //设置背景颜色
//创建物体(即货车)
var obj = app.create({
type: "Thing",
name: "truck",
position: [0, 0, 0],
url: "models/truck/",
complete: function() {
console.log("truck created!"); //创建完成后日志窗口显示返回信息
}
});
app.camera.position = [-15, 5, -20] //设置摄像机位置来调整预览视角
其中,Thing 为模型的类型,truck 为模型的名称,models/truck/ 为模型的相对路径。
运行项目后,在预览窗口,可以展示出创建的物体,如下图所示。
销毁物体
在上面的代码的基础上,将下面的代码输入项目文件中,即可为场景添加销毁物体的按钮。点击按钮,可以销毁物体。关于按钮的添加方法,参阅工具栏的界面。
// 创建按钮,点击按钮可销毁物体
var button = new THING.widget.Button('销毁物体', function() {
obj.destroy();
});
运行项目后,在预览窗口,可以显示出创建的按钮,点击按钮,即可销毁物体。如下图所示。
添加多个园区
将下面的代码输入到项目文件中,即可在场景中添加多个园区。本例中,我们加载了 ThingJS 示例园区和中式建筑园区。
var app = new THING.App({
skyBox: "BlueSky",
}); // 3D场景初始化,设置天空盒
// 添加ThingJS示例园区
var campus1 = app.create({
type: "Campus",
url: "models/factory",
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);
}
});
其中,models/factory 为 ThingJS 示例园区的相对路径。models/chinesehouse 为粮仓园区的相对路径。
通过 position 属性来设置园区的位置。系统默认加载园区的位置为 [0, 0, 0],为了使两个园区的位置不重叠,我们将中式建筑园区的位置设置为 [50, 0, 0]。
项目运行后,鼠标滚轮回滚控制场景缩放,按鼠标左键移动鼠标调整园区位置后,在预览窗口可查看加载的两个园区,如下图所示。
另外,您也可以通过地图来加载多个园区。关于在地图中加载园区的方法,参阅 CityBuilder 快速入门中的添加场景。
参考信息
下面的子章节中,列出了 create() 方法属性、对象属性的概念及分类、以及物体类型,供您参考。
常用 create() 方法属性
下表所示为常用的 create() 方法属性,均为可选的属性,而非必选项。更多相关信息,参阅 ThingJS API 中的 create。
属性名称 | 类型 | 说明 | 代码示例 (name: value) |
---|---|---|---|
type | string | 指明物体类型。关于物体类型的说明,参阅物体类型。 | type: 'Thing' |
id | number/string | 指明物体编号。 | id: ‘123’ |
name | string | 指明物体的名称。 | name: 'truck' |
position | array | 设置物体在世界坐标系下的位置,系统默认位置为 [0, 0, 0]。 | position: [-10, 15, 20] |
localPosition | array | 设置在父物体下的相对位置。localPosition 属性与 position 属性,两个属性不能同时设置,二者择一。 | localPosition: [0, 15, 0] |
angles | array | 设置世界坐标系下三轴旋转角度。 | angles: [90, 45, 90] // 在世界坐标系下物体沿 X 轴旋转 90 度,沿 Y 轴旋转 45 度,沿 Z 轴旋转 90 度。 |
scale | array | 设置相对本地坐标系下的缩放比例。 | scale:[2, 2, 2] // 等比缩放2倍 |
parent | THING.BaseObject | 获取父物体。 | parent: obj |
url | string | 物体资源的路径。 | url: 'https://www.thingjs.com/static/models/factory', |
complete | function | 物体加载完成后的回调函数。 | complete: function (ev) { console.log(1); } |
对象的概念
一般来说,对于 ThingJS 开发平台而言,我们这里的对象指的是 3D 场景中所创建的物体,包括模型、园区、基本形状、界面等等。我们可以通过 ThingJS API 编写应用程序,来控制这些对象。
对象属性及分类
下面的章节中,我们介绍一下常用的对象属性分类及其说明。
通用属性
通用属性是 3D 场景中创建的物体 (如基本形体、模型、界面等)所具有的常规属性,具体说明如下表所示。
属性名称 | 类型 | 说明 |
---|---|---|
type | string | 指明物体的类型。参阅物体类型。 |
id | number/string | 指明物体的编号。 |
name | string | 指明物体的名称。 |
position | array | 设置物体在世界坐标系下的位置。属性值是一个 [x, y, z] 数组,位置坐标的单位均为米。 |
localPosition | array | 设置在父物体下的相对位置。localPosition 属性与 position 属性,两个属性不能同时设置,二者择一。 |
angles | array | 设置世界坐标系下三轴旋转角度,例如,angles: [90, 45, 90] ,代表在世界坐标系下物体沿 X 轴旋转 90 度,沿 Y 轴旋转 45 度,沿 Z 轴旋转 90 度。 |
scale | array | 设置相对本地坐标系下的缩放比例。 |
visible | boolean | 是否显示物体。 |
style | THING.BaseStyle | 获取物体样式。 |
children | Array | 获取所有子物体。 |
parent | THING.BaseObject | 获取父物体。 |
parents | THING.Selector | 获取所有的父物体。(在返回的选择器结果中,第0位为直属父物体,最后一位为世界根物体。) 对于从 CampusBuilder 中导入的物体而言: - 对象属性 id 对应 CampusBuilder 中的自定义 ID(即 UserID)。 - 对象属性 name 对应 CampusBuilder 中的名称(即 Name)。 |
complete | function | 物体加载完成后的回调函数。 |
类属性
类属性是 Thing 类物体(如模型)的属性。对于 CampusBuilder 中的模型,url 属性是必须添加的。获取模型路径的方法,参阅工具栏的模型。
属性名称 | 类型 | 说明 |
---|---|---|
url | string | 物体资源的路径。 |
自定义属性
CampusBuilder 中的模型或园区可以添加自定义属性,从 CampusBuilder 导入的用户自定义的属性可通过 userData 属性访问到。关于自定义属性的访问方法,参阅访问自定义属性。
注意事项
CampusBuilder 中的模型只有在添加了UserID、Name、或者自定义属性后,才能成为被管理对象,即通过 ThingJS API 来控制。
物体类型
下表所示为 ThingJS API 中定义的物体类型。
分类 | 物体类型属性值(即 Type 属性值) |
---|---|
模型 | Thing |
基本形体 | Box, Sphere, Plane, Cylinder, Tetrahedron |
园区建筑 | Campus, Building, Floor, Room |
界面 | UIAnchor, Marker, WebView |
粒子 | ParticleSystem |
线 | Line, RouteLine, PolygonLine |
其他 | Heatmap |
判断物体类型
使用 instanceof 关键字对单个物体的类型进行检查。通过下面的代码,来检查单个物体类型是否为建筑,如果是,则在日志窗口中返回 This is a building! 信息。
注意事项
多个物体属于 THING.Selector 类,不能用单个物体的类型来判断。
//加载ThingJS示例园区
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory', // 场景地址
background: '#000000',
env: 'Seaside',
});
//通过load事件查询物体,并在日志窗口返回信息
app.on('load', function() {
var obj = app.query('.Building')[0]; //查询系统编号为0的建筑
if ( obj instanceof THING.Building) {
console.log("This is a building!");
} //判断单个物体类型是否为建筑
});
多个物体属于 THING.Selector 类,不能用单个物体的类型来判断。我们可以将代码写为:
//加载ThingJS示例园区
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/factory', // 场景地址
background: '#000000',
env: 'Seaside',
});
//通过load事件查询物体,并在日志窗口返回信息
app.on('load', function() {
var objs = app.query('.Building'); //当对象为多个建筑时,需要用THING.Selector类判断
if ( objs instanceof THING.Selector) {
console.log("This is a container!");
}
});
另外,您也可以定义自己的物体类型。关于自定义类的相关介绍,参阅使用自定义类。
下一个教程中,我们来学习获取对象。