从零开始学习 3D 可视化之 3D 界面
生活中我们经常会说到 3D,比如 3D 游戏、3D 电影等等。3D 指三维,三个维度、三个坐标,即长、宽、高。换句话说,就是立体的,3D 的空间的概念是由 X、Y、Z 三个轴组成的空间,是相对于只有长和宽的平面(2D)而言。2D 又叫平面图形,图形内容只有水平的 X 轴向与垂直的 Y 轴向。而一直以来在 ThingJS 中搭建的数字孪生可视化场景都是放在 3D“容器”内的,3D“容器”提供了 3D 和 2D 的界面展示能力。
ThingJS 主要提供 Marker 物体和 WebView 物体以支持 3D 空间界面。
创建 Marker
Marker 物体可以添加一个图片放置到你希望的位置,也可以将这个图片添加到数字孪生可视化对象身上,跟随数字孪生可视化对象一同移动。Marker 默认受距离远近影响,也就是说所谓近大远小的效果,会在 3D 空间中有前后遮挡效果。
复制代码
Marker 可以将图标、Canvas 绘制的图片,展现在 3D 场景中或绑定在 3D 物体上。
复制代码
运行结果见下图,在 Marker 上点击时,会改变标记上的数字。
创建 WebView 物体
如果想在数字孪生可视化场景中放一张图片,应该怎么放进去呢?可以使用 WebView 物体,将其他网站或者页面的内容嵌入到数字孪生可视化场景中。
代码如下:
复制代码
—————————————————
数字孪生可视化:thingjs.com/
版权声明: 本文为 InfoQ 作者【森友小锘】的原创文章。
原文链接:【http://xie.infoq.cn/article/1b4726e7d26f18759300eaf12】。文章转载请联系作者。
评论