FVS三维模型路径动画实例

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 场景概述

在园区、商业综合体、医院、交通枢纽等复杂空间中，建筑通常由多楼层、多楼宇组成，内部结构复杂、连接关系多样。当需要从一个地点移动到另一个地点时，路径往往不仅局限于单一楼层，还涉及楼层切换（如电梯、楼梯）以及楼宇之间的通行（如连廊、地下通道等）。

传统二维地图或单层三维展示难以直观呈现跨层、跨楼宇的完整路径，用户需要频繁手动切换视角和楼层，理解成本较高，路径连续性也容易被打断。

为提升空间导航的可理解性与引导效率，期望在三维场景中提供跨楼层 / 跨楼宇路径导航能力：通过动画方式动态展示起点与终点之间的完整行进路径，系统自动完成楼层切换与楼宇衔接，并清晰标注电梯、连廊等关键连接点，使用户能够直观理解跨区域移动路线。

具体效果如下图所示：

1.2 实现思路

通过下拉框控件选择路径起点、终点，再调用对应路线的路径动画。

需要先制作一张包含三维组件的 FVS 模板。

注：本章仅演示一个简单的三维组件如何制作。更多功能请参见：三维自定义场景组件 。

可点击直接下载包含三维组件的初始模板：三维路径动画初始模板.fvs

2.1 三维场景建设

用户点击菜单栏「文件>新建可视化看板」，创建一张空白看板，可设置模板名称和尺寸。如下图所示：

添加三维自定义场景组件到页面，点击「编辑组件」，生成一个空场景。如下图所示：

1）点击下载并解压 glb 模型文件：三维路径动画模型.zip

2）在三维自定义场景组件编辑界面，点击「模型>添加模型>上传模型」。将模型上传后，选中模型，将其添加到场景中。如下图所示：

3）根据需求调整模型的大小和位置、三维场景的环境属性，或添加场景事件。完成场景设置后，点击左上角「返回可视化看板」返回到画布。

2.2 数据准备

需要新建一个数据集，用于给下拉框控件配置选项值来源。新建内置数据集「路线导航」，内容如下图所示：

3.1 添加标题组件

1）点击组件区「其他>文字>标题组件」，添加 4 个标题组件到页面中。

分别设置标题组件的标题内容为：路线导航、起点、终点和重置，并调整合适的大小和位置。如下图所示：

3.2 添加下拉框控件

1）点击组件区「控件>列表>下拉框」，添加 2 个下拉框组件到页面中。

点击设置选项值来源为「数据查询>路线导航」，分别设置实际值和显示值为起点、终点。如下图所示：

3.3 设置下拉框交互事件

给下拉框添加一个「编辑结束」事件，用于在选择起点和终点后自动播放对应路径动画。

JavaScript 代码如下：

注：起点、终点下拉框一致，都需要同时获取两个下拉框的值后再调用动画播放。

var start1 = duchamp.getWidgetByName("下拉框1_页面1").getValue();
var end1 = duchamp.getWidgetByName("下拉框2_页面1").getValue();
var Animation1 = null;

if (start1 === "102" && end1 === "202") {
        Animation1 = duchamp.getWidgetByName("学校模型1").getMeshByName("102-202").getAnimationByName("003闪烁");
    } else if (start1 === "102" && end1 === "306") {
        Animation1 = duchamp.getWidgetByName("学校模型1").getMeshByName("102-306").getAnimationByName("004");
    } else if (start1 === "205" && end1 === "202") {
        Animation1 = duchamp.getWidgetByName("学校模型1").getMeshByName("205-202").getAnimationByName("001");
    } else if (start1 === "205" && end1 === "306") {
        Animation1 = duchamp.getWidgetByName("学校模型1").getMeshByName("205-306").getAnimationByName("002");
    }
if (Animation1) {
    Animation1.play({
        isRestart: false,
        isLoop: true,
        isInitialOnPlayStop: false,
        onAnimationPlayStop: () => {}
    });
}

3.4 设置标题组件交互事件

1）给「重置」标题组件添加一个点击事件，实现点击后重置两个下拉框的值。

Javascript 代码如下：

duchamp.getWidgetByName("下拉框1_页面1").reset(); 
duchamp.getWidgetByName("下拉框2_页面1").reset(); 

2）给「重置」标题组件添加一个三维模型动画事件，用于关闭已经播放的路径模型动画，实现重置效果。

点击「添加执行动作>三维模型动画」，播放命令选择「退出播放」，选择所有的路径动画对象。如下图所示：

点击右上角「保存」，本文示例到这里就完成了。

点击下载模板：三维路径动画模板.fvs