FVS三维组件接口

新增三维组件漫游动画相关接口：

getRoamAnimations 、playRoamAnimations 、updateRoamAnimationAction

interface DataLayer {

  /**

   * 图层是否显示

   */

  visible: boolean;

  /**

   * 设置图层显示或隐藏

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三维组件名称").getDataLayers();

FVS点击隐藏/显示三维组件数据图层

interface DataLayer {

  /**

   * 当前图层是否显示

   */

  visible: boolean;

  /**

   * 设置当前图层显示或隐藏

   */

  setVisible: (visible: boolean) => void;

}

duchamp.getWidgetByName("三维组件名称").getDataLayerByName("图层1");

FVS点击隐藏/显示三维组件数据图层

{

from:number,

to:number,

duration:number,

})

设置自定义模型组件的场景时间动态变化

注：仅支持 三维自定义场景组件

from:number

to:number

duration:number

to：场景变化的结束时间，整数，必须大于 from 

duration：场景完成变化的时长，单位 ms

自定义模型从第一天的 14:00 开始到 第二天的 14:00 结束，变化时长为 3 秒：

duchamp.getWidgetByName("自定义模型1_页面1").animateSceneTime({
     from: 14, //从默认的14点开始
     to: 38, //到第二天的14点结束
     duration: 3000 //变化时长为 3 秒
});

在上述场景的基础上，开启循环变化：

注：暂无停止场景时间变化接口。

setInterval(function(){
duchamp.getWidgetByName("自定义模型1_页面1").animateSceneTime({
     from: 14,
     to: 38,
     duration: 3000
});         
},2000)      

三维自定义场景组件场景时间

获取三维组件中的自定义模型对象

注：仅支持 三维自定义场景 组件和 三维城市场景 组件中的自定义模型

name:string

name: 模型mesh对象名称

visible: 可见性

scaling: 缩放比例

rotation: 旋转角度

position: 位置

focus: 聚焦模型位置

示例：获取某个模型对象的缩放比例

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").scaling

-

设置模型对象是否可见

注：若父层级模型对象隐藏，设置子层级模型对象显示不生效

visible:boolean

是否可见，布尔型

• true：可见

• false：不可见

viod

示例：设置某个三维组件中某个模型对象不可见

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setVisible(false);

-

NumberArray3

缩放比例的值：[X,Y,Z]

viod

示例：设置某个三维组件中某个模型对象的缩放比例

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setScaling([10,10,10]);

NumberArray3

旋转角度的值：[X,Y,Z]

viod

示例：设置某个三维组件中某个模型对象的旋转角度

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setRotation([10,10,10]);

NumberArray3

位置的值：[X,Y,Z]

viod

示例：设置某个三维组件中某个模型对象的位置

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").setPosition([10,10,10]);

设置模型对象快速聚焦

V1.15.0 及之后版本支持控制镜头的距离、中心点、角度等参数

options: {

    target: "top" | "bottom" | "left" | "right" | "front" | "back" | "center";

    targetpos: (value: NumberArray3) => NumberArray3;

    viewRay: (value: NumberArray3) => NumberArray3;

    distance: (value: number) => number;

  }

1）target：相机聚焦到模型上的位置（模型对象的六个面中心和体中心），默认为 top

2）targetpos：在 focus 基础上微调聚焦中心点的坐标

3）viewRay：改变视线

注：需满足相机视角「垂直角度」的角度范围

默认实现方向取决于 target ，例如：

• 当 target 为 'top', 'bottom', 'front', 'center' 时，

  视线为斜向下 沿 y-z 平面 45 度：[0, -1, 1]

• 当 target 为 'left' 时，视线为沿 x-z 平面，斜向下

  45 度, 看向左侧面：[1, -1, 0]

• 当 target 为 'right' 时，视线为沿 x-z 平面，斜向

  下 45 度, 看向右侧面：[0, -1, 1]

4）distance：改变相机与模型的距离

注：需满足相机视角「缩放设置」的距离范围

默认距离取决于 target 面的大小，若 target 为 'center' ，则取决于模型对象整体的大小

viod

示例1：

duchamp.getWidgetByName("组件名称").getMeshByName("模型名称").focus();

示例2：

const widget = duchamp.getWidgetByName("组件名称");
const mesh = widget.getMeshByName("模型名称");
mesh.focus({
   target: "center",
   viewRay: () => [1, -1, 1],
   distance: (v) => v * 0.8
  });

刷新三维组件数据，仅数据更新，组件整体不更新

注：V1.17.1 之前版本仅支持 三维城市场景 和 三维自定义场景 组件

duchamp.getWidgetByName("自定义模型").refreshData({a:"参数a"});

注：传递多个参数时，写法如下

duchamp.getWidgetByName("自定义模型").refreshData({a:"参数a",b:"参数b"});

示例2：给模板添加「页面加载结束事件」，使三维组件定时刷新数据：

setInterval(() => {
duchamp.getWidgetByName("自定义模型").refreshData();
}, 3000); //每隔 3 秒刷新一次数据

JS实现三维组件传参仅刷新数据

订阅监听三维组件数据图层中的数据更新：当数据图层中的数据更新，或者生成新的数据，执行回调

注1：需配合刷新接口使用

注2：仅支持 三维城市场景 和 三维自定义场景 组件

subscribeMarkerData(observer: (data: { [key: string]: any }, observer: {unsubscribe: () => {}}) => void): void;

• data 为字典类型，其数据取决于数据图层的配置
  

• key 为数据集中选择的字段名, value 为数据集中选择字段对应的值

• unsubscribe 为函数，用于取消监听订阅

示例：根据数据库表字段，控制模型是否可见

async function perform() {
  // 等待场景加载结束，并获取到 widget, dataLayer
  const widget = await future(() => duchamp.getWidgetByName("停车场模型"));
  const dataLayer = await future(() => widget.getDataLayerByName("车辆监控"));

  // 根据数据图层 marker 数据，隐藏指定模型
  const processMarkerData = data => {
    const visible = data["是否有车"] === "1";
    const name = data["车辆编号"];
    const mesh = widget.getMeshByName(name);
    mesh.setVisible(visible);
  };

  // 订阅监听数据图层 Marker 数据，当 Marker 更新时，执行订阅监听函数
  const observer = dataLayer.subscribeMarkerData(data => {
    processMarkerData(data);
  });

  // 每隔 3s，刷新组件数据
  const refreshTimerId = setInterval(() => {
    widget.refreshData();
  }, 3000); // 循环执行
  }
显示代码

可单独更新三维组件数据图层中指定模型对象数据

注：仅支持 三维城市场景 和 三维自定义场景 组件

updateMarkerData(predicate: (data) => boolean, updater: (data) => void);

• predicator 为查询函数，用于判断数据项是否需要更新，若返回值为 true，表示需要更新

• updator 为更新函数，用于更新通过 predicator 校验，返回为 true 的数据
  

const widget = duchamp.getWidgetByName("停车场模型");
const dataLayer = widget.getDataLayerByName("车辆监控");
  // 使用 updateMarkerData 方法更新数据
  dataLayer.updateMarkerData((markerData) => {
    return markerData["车辆编号"] === "车辆006";
  }, (markerData) => {
    markerData["停车时长"] = 12;
  });

使用文本框控件，输入对应车辆编号和停车时长，编辑结束后模型数据变化。（停车场模型设置了停车时长超过 10h 模型红色预警）如下图所示：

点击下载模板：JS实现更新指定模型数据.fvs

获取三维组件的所有漫游路径信息（目前仅支持返回漫游路径名称）

注：仅支持 三维城市场景 和 三维自定义场景 组件

示例：获取「自定义模型」组件的漫游路径信息

duchamp.getWidgetByName("自定义模型").getRoamAnimations();

-

播放漫游动画

注：仅支持 三维城市场景 和 三维自定义场景 组件

RoamAnimationOptions

type RoamAnimationOptions = {
  /**
   * 漫游路径名称
   */
  names: string[];
  /**
   * 播放模式：循环播放|单次播放
   */
  playMode: "loop"|"once";
};

示例1：给标题组件添加点击事件，播放「自定义模型」组件的「漫游路径1」动画

duchamp.getWidgetByName("自定义模型").playRoamAnimations({
   names:["漫游路径1"], 
   playMode: "once"
})

示例2：在「页面加载结束事件」中写代码，实现页面加载结束后自动播放漫游动画

setTimeout(() => {
  duchamp.getWidgetByName("自定义模型").playRoamAnimations({
   names:["漫游路径1"], 
   playMode: "once"
})
}, 5000)

-

暂停/继续/退出播放漫游动画

注：仅支持 三维城市场景 和 三维自定义场景 组件

"pause" ：暂停

"continue"：继续

"exit"：退出

示例1：暂停「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("pause");

示例2：继续「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("continue");

示例3：退出「自定义模型」组件漫游动画

duchamp.getWidgetByName("自定义模型").updateRoamAnimationAction("exit");

-

动画名称

即为 getMeshByName 里获取的 animations[index].name。

注：此处为具体动画名称，非模型名称。如下图所示：

获取「三维自定义场景1_页面1」的「SMT贴片机爆炸归位」模型的「1爆炸」动画

const animation = duchamp.getWidgetByName("三维自定义场景1_页面1").getMeshByName("SMT贴片机爆炸归位").getAnimationByName("1爆炸")

开始播放「1爆炸」动画

animation.play({
  // 是否重新开始播放
  isRestart: false,
  // 是否循环播放
  isLoop: false,
  // 播放结束是否恢复起始状态
  isInitialOnPlayStop: false,
  // 播放结束回调函数
  onAnimationPlayStop: () => {}
})

暂停播放「1爆炸」动画

animation.pause()

结束播放「1爆炸」动画

//true:动画退出，并恢复为动画播放前的状态
//false:动画退出，保持在当前动画帧
animation.stop(true)

-

开启/继续三维组件的视角旋转

注：建议在关闭组件悬停后使用，否则视角旋转会受到组件悬停的影响。

speed

旋转速度

-

-

示例：开启/继续「三维自定义场景1_页面1」的视角旋转，且旋转速度为 15

duchamp.getWidgetByName("三维自定义场景1_页面1").camera.playAutoRotation(15)

-

暂停三维组件的视角旋转

注：建议在关闭组件悬停后使用，否则视角旋转会受到组件悬停的影响。

-

-

-

-

示例：暂停「三维自定义场景1_页面1」的视角旋转

duchamp.getWidgetByName("三维自定义场景1_页面1").camera.pauseAutoRotation()

-

停止三维组件的视角旋转

注：建议在关闭组件悬停后使用，否则视角旋转会受到组件悬停的影响。

isInitial: boolean

是否恢复初始视角，布尔型

• true：恢复初始视角

• false：不恢复初始视角

-

-

示例：停止「三维自定义场景1_页面1」的视角旋转

duchamp.getWidgetByName("三维自定义场景1_页面1").camera.stopAutoRotation(true)

-

获取三维场景的视角参数信息

-

-

position: number

target: number

position：相机坐标

target：视点坐标

示例：获取「三维自定义场景1_页面1」的视角参数信息

duchamp.getWidgetByName("三维自定义场景1_页面1").camera.getState()

-

{

position:number,

target:number,

duration:number,

})

设置三维场景的视角参数信息

position:number

target:number

duration:number

position：相机坐标

target：视角坐标

duration：动画过渡时间，可选项，默认值为2000（毫秒）

示例：设置「三维自定义场景1_页面1」的视角参数信息

duchamp.getWidgetByName("三维自定义场景1_页面1").camera.setState({ position: [20, 20, 10], target: [0, 0, 0]}, 2000)

-

name：string

视角名称

position: NumberArray3

target: NumberArray3

position：相机坐标

target：视点坐标

示例：获取组件「三维自定义场景1_页面1」的「视角1」的视角参数信息

duchamp.getWidgetByName("三维自定义场景1_页面1").getCameraPerspectiveByName("视角1")