官方示例(17):3D场景顶牌模型化开发ThingJS

#前端 #3D开发 #物联网场景可视化

  1. 3D场景中的广告顶牌
  2. CampusBuilder设置信息牌
  3. ThingJS开发场景顶牌

3D场景中的广告顶牌

我们都见过户外广告牌,作为一种户外媒体装置设立于楼群或公路旁,不仅吸引人流,提供场景指引,还可以作为建筑设计的一部分。因此,广告牌的造型设计是多样的。
在这里插入图片描述

在物理世界,广告牌会受到制作材料、受力构件的影响;在3D场景中,顶牌不再是实际意义上的广告牌,而是一种信息表达形式。
3D场景的广告顶牌通常需要图形标注,加入了在线元素,比如缩放、颜色和透明度等,起到更美观的作用。

CampusBuilder设置信息牌

ThingJS提供可视化开发组件,智慧场景在CampusBuilder(模模搭)搭建。

(1)顶牌在模模搭界面内又称为“信息牌”,通常在模型(如柜子)上显示,所以要先选中模型,并明确模型ID、模型名称和自定义属性,左下角编辑信息牌。
在这里插入图片描述

(2)信息牌可以选择不同的样式,并且设置3D模型化或者可见显示,预览确认后即可。
在这里插入图片描述

(3)确认信息牌之后,模型上方会显示并同步到ThingJS开发项目。
在这里插入图片描述

ThingJS开发场景顶牌

ThingJS平台支持嵌入到场景开发项目中,在线进行编辑修改。项目开发界面中,编辑器提供代码描述,3D容器提供3D场景和2D可视化组件,方便用户操作。
基础操作:(1)创建或缩放顶牌;(2)更改样式或文本
鼠标注册事件:(1)点击显示:选择点击模型,上方显示顶牌;(2)悬浮显示:选择在模型上放置鼠标,感应之后即显示;(3)常显显示:顶牌被固定在模型上;(4)模型化顶牌:选择3D模型化,则变成立体顶牌,呈现3D效果。
注意:3D场景中的顶牌信息详情表提供模型信息,设置信息顶牌时应该一一确认。
在这里插入图片描述

更多代码示例进入在线开发-3D界面(http://www.thingjs.com/guide/?m=sample)查看。

ThingJS在线开发推出“场景显示顶牌”功能,智慧场景搭建与在线开发更好结合,用户在项目内(而不仅仅是场景内)进行开发,直接调用javasript更轻松!

关于ThingJS

ThingJS提供物联网3D可视化组件,直接Javascript调用3D脚本,基于200个3D开发源码示例,让你全面了解物联网可视化开发逻辑,同20万个开发者一起成为数字孪生技术创新者!

猜你喜欢

转载自blog.51cto.com/14889890/2636921