小红砖 | 前端三维库之标签类(二)

原创
小红砖  前端三维库之标签类二

标签类属性、操作


获取标签类实例


接口说明

获取标签类实例。


返回参数说明
名称描述类型示例
markmark的实例object

使用示例
var mark = app.mark;


相关示例


点击进入示例库 添加三维字体



添加dom标签

接口说明

添加dom标签


传入参数说明
名称描述类型必填示例
options创建dom标签的详细信息object{}
options.idmark图标的id,即标签 key,默认随机生成string{id: '10001'}
options.titlemark图标的title,默认 markstring{title: 'mark'}
options.draggablemark图标是否允许拖拽,默认为trueboolen{draggable: false}
options.colormark填充的颜色,默认[255,0,0]array{color: [99,99,99]}
options.colorLinemark线条的颜色,默认[0,0,0]array{colorLine: [0,0,0]}
options.startPositionmark起点所跟随的三维空间的世界坐标,默认[0,0,0]array{startPosition: [0,0,0]}
options.endPositionmark图标主体所处的屏幕坐标,默认[0,0]array{endPosition: [800,200]
options.domElementmark中要添加的dom元素domElement{domElement: document.createElement('div')
options.componentId该mark关联的构件keystring{componentId: '241905945_20gbK2VjDD3hZEN$kzGQ5e'
options.callback完成添加的回调函数,该回调函数的参数为所创建的mark的idfunction{callback: function(markId){}

使用示例
const domElement = document.createElement('div');
domElement.textContent = '墙壁';
const domMarkOptions = {
  id: '123',
  title: 'mark',
  color: [99, 99, 99],
  colorLine: [0, 0, 0],
  startPosition: [0, -0, 0],
  endPosition: [800, 200],
  domElement: domElement
];
mark.addDomMark(domMarkOptions, markId => {});

相关示例

点击进入示例库 添加面板标签



添加plane标签

接口说明

添加plane标签


传入参数说明
名称描述类型必填示例
options创建plane标签的详细信息object{}
options.urlmark图标的地址string{url: 'https://www.bos.xyz/bos3d/img/fire.png'}
options.idmark图标的id,即标签 key,默认随机生成string{id: '10001'}
options.sidemark图标可见面 0-正面,1-反面,2-双面 (默认双面)number{side: 0}
options.widthmark图标宽度 (默认为图片像素宽度)number{width: 200}
options.heightmark图标高度(默认为图片像素高度)number{height: 300}
options.useImageSizemark图标是否使用图片宽高,默认是falseboolen{useImageSize: true}
options.opacitymark图标的透明度(默认为 1)number{opacity: 1}
options.transparentmark图标是否透明 ,为真时opacity才会生效(默认为 false)boolen{transparent: false}
options.alwaysVisiblemark图标是否始终可见 (默认为true)boolen{alwaysVisible: true}
options.colormark图标的图片的颜色 默认[1,1,1] (如果不是1,1,1会覆盖图片本身的颜色)array{color: [1,1,1]}
options.emissivemark图标的图片自发光的颜色 默认[0,0,0] (如果不是0,0,0会覆盖图片array{emissive:[0,0,0]}
options.matrixmark图标的4*4的转换矩阵,默认不作变换array{matrix:[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]}
options.callback完成添加的回调函数,该回调函数的参数为所创建的mark的idfunctionfunction(markId){}

使用示例
const planeMarkOptions = {
  id: '123',
  url: 'https://www.bos.xyz/bos3d/img/fire.png',
  side: 2,
  useImageSize: true,
  alwaysVisible: true,
  matrix: [1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 100, 0, 0, 0, 1]
  };
mark.addPlaneMark(planeMarkOptions, function(a) {});


添加sprite标签

接口说明

添加sprite标签


传入参数说明
名称描述类型必填示例
options创建sprite标签的详细信息object{}
options.positionmark图标的位置,默认[0,0,0]array{position: [0,0,0]}
options.urlmark图标的地址string{url: 'https://www.bos.xyz/bos3d/img/fire.png'}
options.idmark图标的id,即标签 key,默认随机生成string{id: '10001'}
options.widthmark图标宽度 (默认为图片像素宽度)number{width: 100}
options.heightmark图标高度 (默认为图片像素高度)number{height: 100}
options.scalemark图标的缩放比例 (默认为1)number{scale: 1}
options.alwaysVisiblemark图标是否始终可见 (默认为true)boolean{alwaysVisible: true}
options.componentKey该mark关联的构件keystring{componentKey: '241905945_20gbK2VjDD3hZEN$kzGQ5e'}
options.callback完成添加的回调函数,该回调函数的参数为所创建的mark的idfunctionfunction(markId){}
使用示例
const spriteMarkOptions = {
  id: '123',
  url: 'https://www.bos.xyz/bos3d/img/fire.png',
  scale: 1,
  useImageSize: true,
  alwaysVisible: true,
  position: [0, 0, 0]
};
mark.addSpriteMark(spriteMarkOptions, function(a) {});


添加Three标签

接口说明

添加Three标签


传入参数说明
名称描述类型必填示例
options创建Three标签的详细信息object{}
options.idmark图标的id,即标签 key 默认随机生成string{id: '10001'}
options.namemark图标的文字描述 默认markstring{name: 'mark'}
options.scalemark图标的缩放比例 (默认为20)number{scale: 15}
options.alwaysVisiblemark图标是否始终可见 (默认为true)boolean{alwaysVisible: false}
options.colormark图标的背景颜色 默认[99,99,99]array{color: [0,0,0]}
options.wordColormark图标的文字的颜色 默认[0,0,0]array{wordColor: [0,0,0]}
options.positionmark在三维空间的位置 默认[0,0,0]array{position: [0,0,0]}
options.callback完成添加的回调函数,该回调函数的参数为所创建的mark的idfunctionfunction(markId){}

使用示例
const threeOptions = {
  id: '123',
  scale: 2,
  name:'mark',
  alwaysVisible: true,
  position: [50, 500, 500]
};
mark.addThreeMark(threeOptions, function(markId) {});


更新已创建的标签

接口说明

更新已创建的标签


传入参数说明
名称描述类型必填示例
markId需要更新的标签idstring'10001'
options具体属性要求根据更新的标签Id的标签类型传入对应的创建标签时的options参数object

使用示例
const domElement = document.createElement('div');
domElement.textContent = '墙壁';
const domMarkOptions = {
  title: 'mark',
  color: [99, 99, 99],
  colorLine: [0, 0, 0],
  startPosition: [0, -0, 0],
  endPosition: [800, 200],
  domElement: domElement
};
mark.update('10001',domMarkOptions);



获取当前页面已显示的标签id列表

接口说明

获取当前页面已显示的标签id列表


返回参数说明
名称描述类型示例
ids页面上已显示出来的标签的id列表数组array['10001', '10002']

使用示例
var ids = mark.getShowList();


设置仅显示的标签列表

接口说明

将传入的标签id列表显示到页面上,其余标签隐藏。


传入参数说明
名称描述类型必填示例
ids需要只显示的标签的idarray['10001', '10002']

使用示例
mark.setShowList(['10001']);



显示标签

接口说明

将传入的标签id列表显示在页面上。


传入参数说明
名称描述类型必填示例
ids需要在页面上显示的标签的id列表数组array['10001', '10002']

使用示例
mark.show(['10001']);



获取隐藏的标签

接口说明

获取隐藏的标签id列表。


返回参数说明
名称描述类型示例
ids页面上隐藏的标签列表array['10001', '10002']

使用示例
var ids = mark.getHideList();


设置隐藏的标签

接口说明

将传入的标签id列表中的标签设置为隐藏,其余标签都显示。


传入参数说明
名称描述类型必填示例
ids需要仅隐藏的标签列表array['10001', '10002']

使用示例
mark.setHideList(['10001']);



隐藏标签

接口说明

将传入的标签id列表中的标签隐藏。


传入参数说明
名称描述类型必填示例
ids需要隐藏的标签idarray['10001', '10002']

使用示例
mark.hide(['10001']);


获取所有已创建的标签id列表

接口说明

获取所有已创建的标签id列表


返回参数说明
名称描述类型示例
ids页面上已经创建的标签id列表array['10001', '10002']

使用示例
var ids = mark.getIdList();


获取显示的标签详情列表

接口说明

获取页面上已经显示的标签详情列表,详情包括该标签的id种类和显示状态。


返回参数说明
名称描述类型示例
ids已显示的标签的详情列表array[{id: '10001',type:'DOMMARK',display:true}]

使用示例
var ids = mark.getShowInfoList();



获取隐藏的标签详情列表

接口说明

获取页面上已经隐藏的标签详情列表,详情包括该标签的id种类和显示状态。


返回参数说明
名称描述类型示例
ids已显示的标签的详情列表array[{id: '10001',type:'DOMMARK',display:true}]

使用示例
var ids = mark.getHideInfoList();



删除标签

接口说明

将传入的标签id列表的标签删除。


传入参数说明
名称描述类型必填示例
ids需要删除的标签列表array['10001', '10002']

使用示例
mark.delete(['10001']);



切换隐藏显示标签

接口说明

将传入的标签id列表里的所有标签全都切换隐藏显示,若不传参数则将所有已创建的标签进行切换显示隐藏, 即原来是显示的标签设置成隐藏,原来是隐藏的标签设置成显示。


传入参数说明
名称描述类型必填示例
ids需要切换隐藏显示的标签id列表array['10001', '10002']

使用示例
mark.toggleDisplay(['10001']);


设置标签的鼠标点击监听事件的开关状态

接口说明

获取页面上已经显示的标签详情列表,详情包括该标签的id种类和显示状态。


传入参数说明
名称描述类型必填示例
type标签的类型,'PLANEMARK','SPRITEMARK','THREEMARK' 中的一种, 默认为'SPRITEMARK'string'SPRITEMARK'
flag开启或者关闭标签的鼠标监听事件,默认为trueboolenfalse

使用示例
mark.switchClickEnable('SPRITEMARK',false);



设置标签的触屏监听事件的开关状态

接口说明

获取页面上已经显示的标签详情列表,详情包括该标签的id种类和显示状态。


传入参数说明
名称描述类型必填示例
type标签的类型,'PLANEMARK','SPRITEMARK','THREEMARK' 中的一种, 默认为'SPRITEMARK'string'SPRITEMARK'
flag开启或者关闭标签的鼠标监听事件,默认为trueboolentrue

使用示例
mark.switchTouchEnable('SPRITEMARK',false);


添加标签的监听事件

接口说明

获取页面上已经显示的标签详情列表,详情包括该标签的id种类和显示状态。


传入参数说明
名称描述类型必填示例
callback点击标签后需要进行的回调函数,函数参数接受的是 markIdsfunctionfunction(markid){}

使用示例
mark.click(function(markid){}


获取标签的类型

接口说明

获取页面上已经显示的标签详情列表,详情包括该标签的id种类和显示状态。


返回参数说明
名称描述类型示例
types支持的标签类型列表array['dom', 'plane', 'sprite', 'three']

使用示例
var types = mark.getTypes();


相关文章

小红砖 | 前端三维库你不知道的那些事儿(一)

小红砖 | 前端三维库之视图类(二)

小红砖 | 前端三维库之模型类(二)

小红砖 | 前端三维库之构件类(二)

小红砖 | 前端三维库之相机类(二)

小红砖 | 前端三维库之系统类(二)

小红砖 | 前端三维库你不知道的那些事儿(三)

赞赏
0 点赞
评论
举报

评论区

不超过500字