[{"id":"840f0737-df1d-47ae-bb0a-359b01fe0608","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"d5d9cdef-8854-4505-89be-a2bbc3cb4482","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"3dc3dd55-35b0-4d23-bf62-47bc3650e4ee","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"80d84fbc-d0f8-4e4a-947f-e3e4de9b49b2","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]},{"id":"9152b7ca-0186-4fe3-a26f-5a05f322db07","tags":[{"product":null,"links":null,"id":"adf72f47-7f61-4239-8392-b9bcc127fa80","name":"\u65B0\u589E","color":"green","productId":"0995490e-43fc-4d6e-bc8d-8e66f38b0c63"}]}]
        
(Showing Draft Content)

在仪表板中应用3D场景

上一节介绍了如何准备3D场景文件,准备好了场景文件之后就可以在仪表板中应用。

本节以一简单示例介绍如何在仪表板中使用3D场景。

应用3D场景

1. 添加组件

打开组件列表,然后选中3D场景组件并拖拽至编辑区,即可添加3D场景组件。

image

2. 配置3D场景

单击配置3D场景按钮或组件右上角的齿轮按钮,打开3D场景配置页面。

image

选择需要的3D场景,然后点击确定

如选择的场景中配置有参数,则会在下方的参数设置中出现相关配置。有关参数的使用,详见使用参数实现动态数据

image

如果场景文件中开启了轮播功能,那么加载到仪表板中即开始轮播。

预览组件,可实时控制轮播的启停。

image

3. 属性设置

在右侧可进行属性设置,比如添加组件的入场动画、设置跳转、添加标题、设置外观等等。

相关介绍请见组件外观与属性中对应章节。

image

与仪表板的交互

3D场景组件与仪表板之间的交互行为,包括三方面:

1. 联动分析,支持与仪表板其他组件的数据联动。

image

2. 通过参数进行数据传递和处理,详见使用参数实现动态数据

3. JS 命令。在3D 场景中编写动态 JS 脚本,然后在仪表板上添加图片组件,将 JS 命令与图片的单击事件绑定。从而实现手动交互控制。详见使用JS代码定制交互行为

4. 通过图片组件的命令控制3D 场景的轮播状态。

image

image

开始自动轮播:即单击图片,则开始轮播。

停止自动轮播:即单击图片,则停止轮播。

暂停/恢复轮播:单击图片则开始或暂停轮播。