在 3D 场景初始化后,我们可以通过 create() 方法来创建物体,例如,加载模型、添加标记、创建基本形体等。我们还可以通过 create() 方法来加载园区,例如,添加多个园区。通过 destroy() 方法,可以销毁物体,即在场景中删除物体。

创建物体 create()

可以通过 app 实例对象创建物体:

  1. const obj = app.create();
  2. // 可传入物体的初始属性 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 属性访问到。

  1. obj.userData[attributeName]

当然由于 ThingJS 对象仍然是 JavaScript 对象,因此可以动态添加属性:

  1. obj.monitorData = {
  2. 温度: 10,
  3. 单位: '℃'
  4. }

其他操作自定义属性的 API

  1. obj.hasAttribute('monitorData/温度');
  2. obj.setAttribute('monitorData/温度', 20);
  3. obj.getAttribute('monitorData/温度');

🌰栗子一:加载货车模型

  1. const app = new THING.App(); // 3D场景初始化
  2. app.background = '#F0FFFF'; //设置背景颜色
  3. //创建物体(即货车)
  4. const truck = app.create({
  5. type: "Thing",
  6. name: "truck",
  7. position: [0, 0, 0],
  8. url: "models/truck/",
  9. complete: function() {
  10. console.log("truck created!"); //创建完成后日志窗口显示返回信息
  11. }
  12. });
  13. app.camera.position = [-15, 5, -20] //设置摄像机位置来调整预览视角

🌰栗子二:添加多个园区

  1. var app = new THING.App({
  2. skyBox: "BlueSky",
  3. }); // 3D场景初始化,设置天空盒
  4. // 添加ThingJS示例园区
  5. var campus1 = app.create({
  6. type: "Campus",
  7. url: "models/factory",
  8. complete: function (ev) {
  9. console.log("Campus created: " + ev.object.id);
  10. }
  11. });
  12. //添加粮仓园区
  13. var campus2 = app.create({
  14. type: "Campus",
  15. url: "models/silohouse",
  16. position: [50, 0, -150],
  17. complete: function (ev) {
  18. console.log("Campus created: " + ev.object.id);
  19. }
  20. });
  21. // 调整相机位置和目标
  22. app.camera.position = [113, 201, 196];
  23. app.camera.target = [23, 0, -76];

销毁物体 destory()

添加工具栏按钮,点击后销毁栗子一的卡车:

  1. // 创建按钮,点击按钮可销毁物体
  2. const button = new THING.widget.Button('销毁物体', function() {
  3. truck.destroy();
  4. });

销毁物体集合 destoryAll()

  1. app.query("trunk").destoryAll();