在 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();
