创建/销毁物体

在 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 属性,两个属性不能同时设置,二者择一。 position: [0, 15, 0]
angles array 设置世界坐标系下三轴旋转角度。 angles: [90, 45, 90] // 在世界坐标系下物体沿 X 轴旋转 90 度,沿 Y 轴旋转 45 度,沿 Z 轴旋转 90 度。
scale array 设置相对自身坐标系下的缩放比例。 scale:[2, 2, 2] // 等比缩放2倍
parent function 获取父物体。 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 function 获取物体样式。
children function 获取所有子物体。
parent function 获取父物体。
parents function 获取所有的父物体。(在返回的选择器结果中,第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!");
    } 
});

另外,您也可以定义自己的物体类型。关于自定义类的相关介绍,参阅使用自定义类

下一个教程中,我们来学习获取对象

该文件修订时间: 2021-08-31 16:24:57

results matching ""

    No results matching ""