【Wyn V7.0 update1】3D能力全面增强

收藏

本帖最后由 nimotea 于 2024-1-25 10:33 编辑

背景

从 Wyn7.0 版本引入了 3D 场景以来, 很多使用 Wyn 的用户都对 3D数据可视化非常感兴趣。结合用户反馈的信息，以及行业场景调研。在 Wyn7.0Update1 版本中，Wyn针对于 3D场景中又做了整体增强。在Update1 版本中，支持用户可以一键开启轮播动画，并可以通过仪表板命令来开启关闭轮播，针对每个数据绑定对象也可以针对性的设置观察视角。此外还有些场景需要对 3D模型数据标签做自定义处理，包括自定义显示样式，动态控制数据标签显示隐藏，隐藏数据标签但可以通过数据跳转等方式获取选中筛选列等等场景都可以通过 Wyn7.0Update1版本轻松实现。

3D场景轮播动画
在创建3D可视化场景时，往往需要一些近景动画，比如近距离依次观察车间当中的每个设备，显示设备细节，针对于这种轮播场景，Wyn7.0Update1 在 3D场景设计器中新增了自动轮播功能，可以对所有有数据绑定关系的模型对象进行相机近景观察，对于每一个数据绑定模型对象，还可以单独设定其轮播机位，灵活调整相机动画效果。
3D轮播.gif

开启3D轮播能力，也非常简单，只需要在3D场景编辑器中，选择场景设定，打开轮播设置下的自动轮播，还可以调整轮播相机的高度弧度等相机属性。打开自动轮播后，所有绑定了数据标注层的模型对象就会依次设定一个相机近景机位进行近景观察动画。
image.png377261962.png

还有些场景，可能需要对于轮播模型的机位进行单独调整，Update1 版本也针对这类场景做了功能升级，在左侧模型树中选中指定的模型对象，然后就可以更改该模型的轮播机位属性了。一方面预览相机位置，可以让当前3D场景编辑器的相机移动到该模型的轮播机位位置，另一方面，可以使用滚轮鼠标移动相机机位，然后点击应用编辑器相机位置，就可以将我们手动调整好的相机位置信息应用到当前模型的近景机位中去，使用起来非常方便。
image.png618840331.png

目前为止，我们就能轻松编辑使用轮播场景了，但实际上在仪表板中，我们往往希望点击某个按钮然后才开始3D 场景轮播动画，还有一个按钮可以随时中断轮播动画。为了实现这个需求呢， Wyn7.0Update1 在仪表板方面又提供了新的命令类型 3D场景自动轮播系列，不仅可以通过命令来开启、停止轮播动画，还支持中断、继续轮播场景，可以应对各类场景。
image.png833046264.png

只需要在图片等组件的命令属性上配置好轮播命令，就能实现一键开关、动态触发的轮播场景。
轮播命令.gif

有些场景下可能还需要自定义模型对象选中样式，只需要在3D场景编辑器中选择场景设定>模型选中颜色配置即可。
image.png75349425.png

3D场景数据标签自定义

随着用户场景的逐渐丰富，对于数据标签展示形式也有个各种各样形式的要求，所以在 Update1 版本中，Wyn 针对于数据标签的样式自定义也提供了很多新的工具。Wyn7.0Update1 版本中，对于数据标签，我们可以修改标注层尺寸大小，支持矢量伸缩和固定大小两种模式，还可以上传自定义背景图片作为数据标注图层的背景图，结合标注背景色、边框色等样式配置，可以制作出各种形式的消息提示框。
image.png819903869.png

这些属性搭配上条件格式化，以及透明色背景等技巧可以制作出很多让人耳目一新的提示框样式。除了数据标注本身的样式之外，Update1版本也把数据图表上的富文本方式的编辑器体验增强到了3D场景上。用户可以像写富文本一样对模型上要显示的数据样式做调整修改。

image.png721622924.png

在制作3D场景时，当我们添加好数据图层、和3D模型对象名称关系匹配好之后，点击数据图层，我们就能看到标注图层的各种样式配置选项。包括上文提到的背景色、尺寸自动化、相对位移、自定义背景图片等特性。可以根据需求自定义编辑属性。
image.png88310545.png

如果需要修改数据图层显示内容，只需要点击数据绑定，然后选择提示标签，就能进入到富文本编辑器对展示内容做自定义调整。和仪表板图标的数据标签编辑器体验效果一致。
image.png918728637.png

这样就能在3D模型展示基础上做出更多出彩的展示效果。

数据标签显示模式

在 Wyn7.0 版本中，数据标签一直处于显示状态的，但实际上有些场景，比如车辆相关信息，物件明细数据等等，往往点击后才显示数据详情会更符合用户的使用体验，在新版本中就可以在 3D 场景设计器中对数据绑定层的数据标签设置它的显示模型，Update1 版本支持总是、点击、悬浮、隐藏等选项。如果需要用户点击或鼠标悬浮时才能看到数据信息，就可以在这里一键配置数据标签显示方式。
点击显示数据.gif

还有些场景，虽然模型会绑定数据，但是在具体展示场景中不希望显示数据标签，而可以通过跳转设置等方式将模型对象的数据传递给其他看板，比如摄像头实时访问地址这种信息，我们就可以先给摄像头绑定摄像头地址数据，然后设置数据标注为隐藏状态，但实际上可以通过数据跳转配置传参为隐藏数据标注层的数据列，这样就可以轻松将摄像头视频访问地址传递给另一个使用了视频监控组件的子看板，加上左键跳转配置和数据筛选过滤，我们就能实现点击摄像头就能查看指定车间监控视频这种场景。
钻取显示监控视频.gif

设置数据标签显示模式时，只需要在3D场景编辑器中，选中数据图层，选中数据标签样式，调整数据标签显示模式，即可切换总是、点击、悬浮、隐藏等不同展示模式。
image.png786942138.png

如果需要将某个数据图层，比如摄像头的视频地址透传给其他仪表板时，只需要在仪表板上配置跳转属性即可
image.png897670593.png

总结
Wyn7.0Update1 在3D场景方面针对不同使用场景做了全面功能增强，感兴趣的小伙伴赶快去试试吧，除了3D场景， Wyn7.0Update1还在易用性、产品功能方面做了很多的增强，欢迎大家抢先体验!

胡涂涂 · 胡涂涂

如果我在html界面里，嵌入了一个3D。我能抓取到点击3D里的某个内容，获得其点击事件吗？

nimotea · nimotea

胡涂涂发表于 2024-3-25 11:49
如果我在html界面里，嵌入了一个3D。我能抓取到点击3D里的某个内容，获得其点击事件吗？

两种情况，
1. html 嵌入 Wyn 制作的 3D 模型看板，可以在模型脚本中注册点击事件的 observable
2. html 嵌入自己用 babylonjs 引入的 3D 模型，可以在自己的引入脚本中注册点击事件

上述两种情况都是需要代码中可以访问到 scene 对象才能进行事件注册

胡涂涂 · 胡涂涂

nimotea 发表于 2024-3-25 12:00
两种情况，
1. html 嵌入 Wyn 制作的 3D 模型看板，可以在模型脚本中注册点击事件的 observable
2. h ...

有没有说明文档或例子

nimotea · nimotea

胡涂涂发表于 2024-3-25 13:32
有没有说明文档或例子

暂时没有例子哈，这个思路就是一般的 js 代码思路，和产品无关，如果有类似需求，可以新开一个帖子，描述下问题背景和相关效果，会有工作人员针对具体的问题给出解决方案

		自动登录	找回密码
密码			立即注册

【Wyn V7.0 update1】3D能力全面增强

4 个回复