在 3D 场景初始化后,我们可以通过 create()
方法来创建物体,例如,加载模型、添加标记、创建基本形体等。我们还可以通过 create()
方法来加载园区,例如,添加多个园区。通过 destroy()
方法,可以销毁物体,即在场景中删除物体。
创建物体 create()
可以通过 app 实例对象创建物体:
const obj = app.create();
// 可传入物体的初始属性 options = { key: value }
常用的物体属性:
type: String | 类型 | type: 'Thing' |
---|---|---|
id: String|Number | 编号 | id: '123' |
name: String | 名称 | name: 'truck' |
position: Number[] | 绝对位置(世界坐标系) | position: [-10, 15, 20] |
localPosition: Number[] | 相对位置(父对象坐标系),不能同时设置相对位置和绝对位置 | localPosition: [0, 15, 0] |
angles: Number[] | 绝对旋转角度xyz(世界坐标系) | angles: [90, 45, 90] |
scale: Number[] | 相对缩放比例(自身坐标系) | scale: [2, 2, 2] |
parent: Object | 父对象物体 | parent: obj |
url: String | 物体资源路径 | url: 'https://www.thingjs.com/static/models/factory' |
complete: Function | 创建完成回调 | complete: function (ev) {} |
对象的概念
一般来说,对于 ThingJS 开发平台而言,我们这里的对象指的是 3D 场景中所创建的物体,包括模型、园区、基本形状、界面等等。我们可以通过 ThingJS API 编写应用程序,来控制这些对象。
物体的类型( type
值)
模型 | Thing |
---|---|
基本形状 | Box, Sphere, Plane, Cylinder, Tetrahedron |
园区建筑 | Campus, Building, Floor, Room |
界面 | UIAnchor, Marker, WebView |
粒子 | ParticleSystem |
线 | Line, RouteLine, PolygonLine |
其他 | Heatmap |
判断物体类型 instanceof
注意通过 query()
方法查询的多个物体属于 Selector
集合类型,不能直接通过 instanceof
判断;
自定义属性
园区 CampusBuilder 中创建的物体只有在编辑了 UserID, Name 和自定义属性之后,才能在导入 ThingJS 后成为被管理对象,通过 ThingJS API 控制交互。
其中自定义属性可以通过物体的 userData
属性访问到。
obj.userData[attributeName]
当然由于 ThingJS 对象仍然是 JavaScript 对象,因此可以动态添加属性:
obj.monitorData = {
温度: 10,
单位: '℃'
}
其他操作自定义属性的 API
obj.hasAttribute('monitorData/温度');
obj.setAttribute('monitorData/温度', 20);
obj.getAttribute('monitorData/温度');
🌰栗子一:加载货车模型
const app = new THING.App(); // 3D场景初始化
app.background = '#F0FFFF'; //设置背景颜色
//创建物体(即货车)
const truck = 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] //设置摄像机位置来调整预览视角
🌰栗子二:添加多个园区
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);
}
});
// 调整相机位置和目标
app.camera.position = [113, 201, 196];
app.camera.target = [23, 0, -76];
销毁物体 destory()
添加工具栏按钮,点击后销毁栗子一的卡车:
// 创建按钮,点击按钮可销毁物体
const button = new THING.widget.Button('销毁物体', function() {
truck.destroy();
});
销毁物体集合 destoryAll()
app.query("trunk").destoryAll();