分享
查看: 2256|回复: 0

[发布] 快速应用3D场景下的模拟导航能力

[复制链接]

快速应用3D场景下的模拟导航能力

发表于 2020-12-26 16:59:40 来自 发布 阅读模式 倒序浏览
zzv_icon2256 zzr_icon0 查看全部

3D室内场景承载了建筑物基础的环境信息,利用ThingJS平台模拟导航功能,实现物联网远程管理的可视化。在一个室内场景中,相隔的两个房间也可以实现路径导航功能!


第三人称视角

快速应用3D场景下的模拟导航能力

第一人称视角

快速应用3D场景下的模拟导航能力

首先保证房间、门和电梯/楼梯添加相应属性后,就可以利用鼠标点击功能,设置导航起点、导航终点,自动生成导航线。为了满足模拟导航能力,3D建筑需要有特定的搭建规则。
详情见文档>>

ThingJS室内导航场景的搭建规则-ThingJS开发-ThingJS 开发者社区forum.thingjs.com图标

其中导航点、导航线的对象可以自由设置其样式,包括启动UV动画、加快动画播放速度,更加吸睛哦!代码示例如下:
  1. /**
  2. * 创建导航对象
  3. */
  4. function createNavi() {
  5. if (navi == null) {
  6. navi = new Navigation({
  7. app: app, // 传入app对象
  8. followAngle: false, // 值为true是第一人称导航,为false是第三人称导航,默认为false
  9. // 导航点样式
  10. followAngleStyle: {
  11. speed: 5, // 导航点移动速度,默认为0.8
  12. tip: true, // 导航信息提示,默认为false
  13. element: 'naviTip' // 当打开导航信息提示时,需传入dom标签id显示导航信息
  14. },
  15. // 导航线样式
  16. lineStyle: {
  17. width: 0.3, // 线宽,默认为0.6
  18. image: '/guide/examples/images/navigation/line.png', // 贴图地址
  19. imageRepeat: [0.3, 1], // 贴图重复度,默认为[0.3, 1]
  20. scrollUV: true, // 启动 UV 动画,默认为true
  21. imageScrollSpeed: 0.5, // 设置 UV 动画播放速度,默认为0.5
  22. alwaysOnTop: false, // 设置导航线始终在最前端渲染显示,默认为false
  23. renderOrder: -1000 // 设置渲染排序值,默认为0
  24. }
  25. });
  26. }
  27. }
复制代码
官方示例选取第一人称或第三人称的视角,满足不同场景的业务巡查需求,代码如下:
  1. /**
  2. * 第一人称导航
  3. */
  4. function startNavi1() {
  5. navi.followAngle = true;
  6. // 模拟导航
  7. navi.simulate();
  8. }
  9. /**
  10. * 第三人称导航
  11. */
  12. function startNavi2() {
  13. navi.followAngle = false;
  14. // 模拟导航
  15. navi.simulate();
  16. }
复制代码


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t