官方示例（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万个开发者一起成为数字孪生技术创新者！