在三维场景前端开发中，给模型进行添加标签(标注)是必不可少的开发需求。本次小编带着大家一起探索三维标签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
'pointName': '',
'textFixed': true,
完整代码：
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
以上图为例，将其名称进行设置
'pointName': 'Point_B_7',
- 如需在标签上添加文字，通过设置文字属性来实现，并利用textLocation属性调整文字的显示位置。
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])获取对应的蓝图函数；
fdapi.marker3d.getBPFunction(['m1']);
打印的结果，functionName与面板中属性参数一一对应。
"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]}]
}
]
}]
3. 使用marker3d.callBPFunction修改对应的蓝图函数参数。
注意事项:
- 参照getBPFunction打印结果，其中callBPFunction需要填写的paramType、paramValue和getBPFunction打印结果中的type、defaultValue是一一对应的关系；
- 对需要修改的类型，需要将其该类型下的所有参数进行填写完整并且填写参数顺序与蓝图函数参数(打印的数据)的顺序一致。
fdapi.marker3d.callBPFunction([
{
id: 'm1',
functionName: '颜色',
parameters: [
{ "paramType": 6, "paramValue": [1,0,1,1] }
]
}
]);
3. 3dUI标签
功能实现：
- 设置标签名称pointName，使用marker3d.add创建marker3d；
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'])获取对应的蓝图函数
fdapi.marker3d.getBPFunction(['m1']);
2. 参照getBPFunction打印结果，使用marker3d.callBPFunction修改对应的蓝图函数参数。
注意事项:
- 参照getBPFunction打印结果，其中callBPFunction需要填写的paramType、paramValue和getBPFunction打印结果中的type、defaultValue是一一对应的关系；
- 对需要修改的类型，需要将其该类型下的所有参数进行填写完整并且填写参数顺序与蓝图函数参数(打印的数据)的顺序一致。
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前端也可以直接查看到资源面板，便于开发时标签的选择。
fdapi.settings.setMainUIVisibility(true);
总结
本文深入且详尽地为你剖析前端实现 Marker3d 的添加方式，手把手教你如何轻松为项目添加上令人眼前一亮的动态标记，让你的前端应用瞬间脱颖而出。 此前，我们已精心发布一系列关于二维标签、线面添加的多元实用方法。若你在这些方面有相关需求，千万别错过我们往期精心整理的知识干货，海量宝藏等你挖掘。
三维可视化前端竟能让二维标签玩出 7 种效果欸！
前端三维可视化线面样式选择大揭秘！！！
