1. 概述
适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。
1.1 场景概述
在仓储管理、物流园区、工厂车间等三维可视化场景中，场内往往存在大量货物或设备模型，分布范围广、层级复杂。
当需要快速查看某一指定货物的位置时，传统依赖人工在三维场景中拖拽、缩放、查找的方式效率较低，且在模型数量较多时容易出现定位不准确的问题。
为提升查找效率与使用体验，期望在三维场景中提供货物快速定位能力：
用户可通过下拉框选择货物名称，系统自动在三维场景中定位对应货物，并将画面视角对焦至该货物位置，实现快速、精准的空间查找与关注。
适用于日常巡查、异常定位、调度指挥等场景，有效降低操作成本，提高三维场景的可用性和交互效率。
1.2 实现思路
2. 前期准备
需要先制作一张包含三维组件的 FVS 模板。
注：本章仅演示一个简单的三维组件如何制作。更多功能请参见：三维自定义场景组件 。
点击下载模板：三维场景初始模板.fvs
2.1 三维场景建设
用户点击菜单栏「文件>新建可视化看板」，创建一张空白看板，可设置模板名称和尺寸。如下图所示：
添加三维自定义场景组件到页面，点击「编辑组件」，生成一个空场景。如下图所示：
1）点击下载并解压 glb 模型文件：三维仓储模型.zip
2）在三维自定义场景组件编辑界面，点击「模型>添加模型>上传模型」。将模型上传后，选中模型，将其添加到场景中。如下图所示：
3）将视角调整至总览视图，为三维场景添加一个相机视角，点击「添加当前视角」。
4）根据需求调整三维场景的环境属性，或添加场景事件。完成场景设置后，点击左上角「返回可视化看板」返回到画布。
2.2 数据准备
需要新建一个数据集，用于给下拉框控件配置选项值来源，数据集中模型名称需与三维场景中的模型名称保持一致。
新建内置数据集「货物定位」，数据集中至少要包含「货物名称」字段，内容如下图所示：
注：本次实例仅针对 货物架06 的货物进行定位查询。
3. 交互设置
3.1 添加下拉框控件
1）点击组件区「控件>列表>下拉框」，添加到页面中。
在右侧配置面板「内容」中将绑定参数设置为「meshName」。如下图所示：
2）绑定下拉框控件的选项值来源，选择类型为「数据查询」，选择内置数据集货物定位，选择货物名称字段。如下图所示：
3.2 设置交互事件
给下拉框添加一个「编辑结束」事件并绑定参数meshName，用于联动三维场景模型快速对焦。
设置参数名称为 meshName ，参数内容为 $meshName 。
JavaScript 代码如下：
const widget = duchamp.getWidgetByName("三维自定义场景1_页面1");
const mesh = widget.getMeshByName(meshName);
mesh.focus({
target: "center",
viewRay: () => [1, -1, 1],
distance: (v) => v * 0.8
});
3.3 配置其余组件
1）向画布中添加 2 个「标题组件」并调整到适当的位置。「标题组件」的内容分别修改为 货物查询 和 总览。
2）选择标题组件「总览」，添加一个「鼠标点击事件」，用于在定位具体货物后返回总览。
选择「三维自定义视角」事件，选择在三维组件中设置的公共视角「视角1」，点击确定。如下图所示：
3.4 配置三维模型数据预警
若期望在选中模型并聚焦后对应模型实现高亮效果，可通过设置「数据预警」实现。
1）选择三维组件，点击进入三维组件编辑界面。
选择「数据>添加数据图层」，修改数据图层名称并绑定「货物定位」数据集数据，绑定「货物名称」字段。如下图所示：
2）点击「添加事件>图层更新>数据预警」。
点击「执行条件设置」，添加一个执行条件，选择执行条件为‘当前数据图层’‘模型名称（货物名称）’‘等于’‘公式’‘$meshName’
为模型设置模型「预警样式」，颜色为 #fef79e
点击「确定」后，会弹出弹窗，若需要在模型聚焦时显示数据标签，点击 「创建/启用」，不需要则点击「不创建/不启用」即可。
点击右上角「保存」，本文示例到这里就完成了。
4. 效果预览
5. 模板下载
点击下载模板：三维仓储货物定位实例.fvs
上一篇：FVS三维模型动画应用实例
