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

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

第三人称视角

第一人称视角

首先保证房间、门和电梯/楼梯添加相应属性后，就可以利用鼠标点击功能，设置导航起点、导航终点，自动生成导航线。为了满足模拟导航能力，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. }
10. /**
11. * 第三人称导航
12. */
13. function startNavi2() {
14. navi.followAngle = false;
15. // 模拟导航
16. navi.simulate();
17. }

复制代码

查看官方Demo>>