解锁动态3D标签的可视化玩法

在三维场景前端开发中，给模型进行添加标签(标注)是必不可少的开发需求。本次小编带着大家一起探索三维标签Marker3d~~深入了解三维标签Marker3d的使用技巧。

📌 Marker3d效果呈现

1. 文字标签

能够将文字精准锚定在模型表面 ，文字位置不因观察角度变化而偏移，有效解决了二维标签随视角旋转产生的视觉漂移问题。

2. 点位标签

适用于标识建筑、设备等，直观明了，还可以增强警示效果。

3. 3DUI标签

特效、文字、图标一体化的三维标签，适用多类应用场景。

📌 Marker3d属性

基础属性

用于设置Marker3d信息，包括其id、坐标值，以及其特效名称。 range可以设置标签的可视范围；fixedSize用于设置标签大小是否固定，false为近大远小，true为固定大小。

id：Marker3d唯一标识id；
groupId：可选，Group分组；
coordinates：坐标点数组；
coordinateType：取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
userData：用户自定义数据；
fixedSize： 3D标注是否支持固定尺寸大小，默认：false 近大远小
range：3D标注可视范围: [min, max]
autoHeight：自动判断下方是否有物体，设置正确高度，默认值：false
pointName: 3D标注展示的特效名称，取值详见Explorer资源面板->动态标记下的显示名称，取值示例：Point_B_特效编号

文字属性

设置设置字体的大小、颜色、显示、旋转值、缩放值等。

text: 3D标注显示文字，字符长度范围[0~100]
textSize：3D标注显示文字字体大小，默认值：70
textColor： 3D标注显示文字颜色
textOutlineSize：3D标注显示文字轮廓大小
textOutlineColor：3D标注显示文字轮廓颜色，支持四种格式，取值示例
textFixed：3D标注显示文字是否固定文本朝向
textVisible:3D标注显示文字是否显示文本
textLocation: 文字位置：[X,Y,Z]，取值示例，数组元素类型：(number)，取值范围：[任意数值]
textRotation：文字旋转：[Pitch,Yaw,Roll]，数组元素类型：(number)
textScale：文字缩放：[X,Y,Z]，数组元素类型：(number)

📌 Marker3d功能实现

1. 文字标签

功能实现：

pointName属性传值为''，textFixed显示文字固定文本朝向设置为true

bash 复制代码

'pointName': '',
'textFixed': true,

完整代码：

csharp 复制代码

fdapi.marker3d.clear();
    let o = {
        'id': 'm1',
        'text': '施工中',//3D标注显示文字
        'textSize': 32,//3D标注显示文字大小
        'textColor': [1, 207/255, 73/255,0.5],//3D标注显示文字颜色
        'textOutlineSize': 1,//3D标注显示文字轮廓大小
        'textOutlineColor': '#ffcf47',// 3D标注显示文字轮廓颜色
        'textFixed': true,// 3D标注显示文字是否固定文本朝向
        'fixedSize': true,// 默认尺寸 非近大远小
        'textVisible': true,//3D标注显示文字是否显示文本
        'textLocation': [0, 0, 0],// 文字位置
        'textRotation': [0, 0, 0],// 文字旋转
        'textScale': [10, 10, 10],// 文字缩放
        'pointName': '',//3D标注展示的特效名称
        'pointVisible': true,//3D标注是否显示
        'pointScale': 1,//3D标注整体缩放比例
        'coordinate': [493161.06,2492118.4,3.412552490234375], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
        'coordinateType': 0, //坐标系类型 
        'range': [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
        'autoHeight': false//自动判断下方是否有物体，设置正确高度，默认值：false
    }
    await fdapi.marker3d.add(o);

2. 点位标签

功能实现：

选取标签，填写标签名称至pointName

以上图为例，将其名称进行设置

arduino 复制代码

'pointName': 'Point_B_7',

如需在标签上添加文字，通过设置文字属性来实现，并利用textLocation属性调整文字的显示位置。

csharp 复制代码

 fdapi.marker3d.clear();
    let o = {
        'id': 'm1',
        'groupId': 'marker3dTest',
        'text': '建筑',//3D标注显示文字
        'textSize': 32,//3D标注显示文字大小
        'textColor': '#6BF4F7',//3D标注显示文字颜色
        'textOutlineSize': 1,//3D标注显示文字轮廓大小
        'textOutlineColor': Color.Black,// 3D标注显示文字轮廓颜色
        'textFixed': true,// 3D标注显示文字是否固定文本朝向
        'fixedSize': true,// 默认尺寸 非近大远小
        'textVisible': true,//3D标注显示文字是否显示文本
        'textLocation': [0, 0, 20],// 文字位置
        'textRotation': [0, 90, 0],// 文字旋转
        'textScale': [10, 10, 10],// 文字缩放
        'pointName': 'Point_B_7',//3D标注展示的特效名称
        'pointVisible': true,//3D标注是否显示
        'pointScale': 5,//3D标注整体缩放比例
        'coordinate': [492845.171875,2492156.96,135.67572265625], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
        'coordinateType': 0, //坐标系类型 
        'range': [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
        'autoHeight': false//自动判断下方是否有物体，设置正确高度，默认值：false
    }
    await fdapi.marker3d.add(o);

如果想通过代码修改面板中的拓展参数，怎么修改呢？

每个图标的拓展参数属性不一样。需要通过蓝图函数对拓展参数属性进行修改。

以上图举例，进行修改图标颜色 ~~

实现步骤：

通过marker3d.add进行创建marker3d标签；
使用marker3d.getBPFunction([id])获取对应的蓝图函数；

css 复制代码

fdapi.marker3d.getBPFunction(['m1']);

打印的结果，functionName与面板中属性参数一一对应。

json 复制代码

"data": 
  [{
  "idOrPath":"m1",
  "objectType":"Marker3D",
  "objectName":"Point_B_7_C_2147441768",
  "params":
    [
        {
            "functionName":"H_不透明度",
            "functionParams":
                [{"name":"V_不透明度","type":3,"defaultValue":1}]
        },
        {   "functionName":"亮度",
            "functionParams":
                [{"name":"V_亮度","type":3,"defaultValue":2}]
        },
        {   "functionName":"速率",
            "functionParams":
                [{"name":"V_速率","type":3,"defaultValue":1}]
        },
        {   "functionName":"颜色",
            "functionParams":
                [{"name":"V_颜色","type":6,"defaultValue":[0,0.5,1,1]}]
        }
    ]
}]

使用marker3d.callBPFunction 修改对应的蓝图函数参数。

注意事项:

参照getBPFunction打印结果，其中callBPFunction需要填写的paramType 、paramValue 和getBPFunction打印结果中的type、defaultValue是一一对应的关系；
对需要修改的类型 ，需要将其该类型下的所有参数进行填写完整 并且填写参数顺序与蓝图函数参数(打印的数据)的顺序一致。

php 复制代码

fdapi.marker3d.callBPFunction([
    {
        id: 'm1',
        functionName: '颜色',
        parameters: [
            { "paramType": 6, "paramValue": [1,0,1,1] }
        ]
    }
]);

3. 3dUI标签

功能实现：

设置标签名称pointName，使用marker3d.add创建marker3d；

csharp 复制代码

fdapi.marker3d.clear();
let o = {
  id: 'm1',
  groupId: 'marker3dTest',
  pointName: '3D_UI_C_3', //3D标注展示的特效名称
  pointVisible: true, //3D标注是否显示
  pointScale: 1, //3D标注整体缩放比例
  coordinate: [492817.20875,2491807.2,149.75837890625002], //3D标注的坐标位置 注意：若坐标Z设置高度为0时 autoHeight=true则会显示在物体上方
  coordinateType: 0, //坐标系类型
  range: [1, 10000], //3D标注的可视距离范围：[min,max]，单位：米
  autoHeight: false //自动判断下方是否有物体，设置正确高度，默认值：false
}
fdapi.marker3d.add(o)
fdapi.marker3d.focus(o.id)

如何实现3dUI图标内容的修改呢？

需要通过蓝图函数进行修改！！！

实现步骤：

使用marker3d.getBPFunction(['m1'])获取对应的蓝图函数

css 复制代码

fdapi.marker3d.getBPFunction(['m1']);

参照getBPFunction打印结果，使用marker3d.callBPFunction 修改对应的蓝图函数参数。

注意事项:

参照getBPFunction打印结果，其中callBPFunction需要填写的paramType 、paramValue和getBPFunction打印结果中的type、defaultValue是一一对应的关系；
对需要修改的类型 ，需要将其该类型下的所有参数进行填写完整 并且填写参数顺序与蓝图函数参数(打印的数据)的顺序一致 。

php 复制代码

fdapi.marker3d.callBPFunction([
  {
    id: 'm1',
    functionName: '文字',
    parameters: [
    { "paramType": 5, "paramValue": '3D标注' }, 
    { "paramType": 2, "paramValue": 65}, 
    { "paramType": 6, "paramValue": [1,0,0,1] },
    { "paramType": 3, "paramValue": 1 },
    ]
  },
]);

注意事项

Cloud-文件资源需要挂载pak资源才可以通过代码调用显示动态标记。

pak资源可以通过官网下载： account.freedo3d.com/#/downloads

不需要通过打开explorer，在Cloud前端也可以直接查看到资源面板，便于开发时标签的选择。

arduino 复制代码

fdapi.settings.setMainUIVisibility(true);

总结

本文深入且详尽地为你剖析前端实现 Marker3d 的添加方式，手把手教你如何轻松为项目添加上令人眼前一亮的动态标记，让你的前端应用瞬间脱颖而出。此前，我们已精心发布一系列关于二维标签、线面添加的多元实用方法。若你在这些方面有相关需求，千万别错过我们往期精心整理的知识干货，海量宝藏等你挖掘。
三维可视化前端竟能让二维标签玩出 7 种效果欸！
前端三维可视化线面样式选择大揭秘！！！