构件类 | 前端三维库你不知道的事（四）

来源于👉【知屋安砖】

构件类属性及操作

获取构件类实例

接口说明

获取模型类实例

返回参数说明

名称	描述	类型	示例
component	component的实例	object	-

使用示例

var component = app.component;

设置构件可见

接口说明

设置构件可见

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传值，则设置全部构件可见	array	否	[‘10001’]

使用示例

component.show();

设置构件不可见

接口说明

设置构件不可见

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传值，则设置全部构件不可见	array	否	[‘10001’]

使用示例

component.hide();

相关示例库
构件隐藏

设置构件高亮

接口说明

设置构件高亮

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.setHighlight(['10001']);

相关示例库
聚焦并高亮

添加构件到高亮列表

接口说明

添加构件到高亮列表

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.addHighlight(['10001']);

删除高亮列表中的构件

接口说明

删除高亮列表中的构件

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key；若不传参，则删除全部构件的高亮	array	否	[‘10001’]

使用示例

component.removeHighlight();

相关示例库
构件透明

将构件设置为透明

接口说明

将构件设置为透明

传入参数说明

名称	描述	类型	必填	示例
componentConfig	入参。若不传参，则透明全部构件	object	否	{}
componentConfig.keys	构件的key	array	是	{keys: [‘10001’]}
componentConfig.transparency	透明度；0-不透明，1-透明	number	是	{transparency: 1}

使用示例

component.removeHighlight();

相关示例库
构件透明

将指定构件之外的其他构件设置为透明

接口说明

将指定构件之外的其他构件设置为透明

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.inverseTransparency(['10001']);

相关示例库
反选透明

取消构件的透明状态

接口说明

取消构件的透明状态

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传参，则取消全部构件的透明状态	array	否	[‘10001’]

使用示例

component.removeTransparency(['10001']);

设置构件的颜色

接口说明

设置构件的颜色

传入参数说明

名称	描述	类型	必填	示例
componentConfig	入参	object	是	{}
componentConfig.keys	构件的key	array	是	{keys: [‘10001’]}
componentConfig.color	构件的颜色	string	是	{color: ‘#f2f2f2’}
componentConfig.opacity	模型的不透明度。默认的值是1，输入值的范围值0-1	number	是	{opacity: 1}

使用示例

component.color({keys: ['10001'], color:
'#f2f2f2', opacity: 1});

相关示例
设置构件颜色

取消构件的变色

接口说明

取消构件的变色

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传参，则取消全部构件的变色	array	否	[‘10001’]

使用示例

component.removeColor(['10001']);

将构件设置为线框模式

接口说明

将构件设置为线框模式

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.wireframe(['10001']);

相关示例库
构件线框

取消构件的线框模式

接口说明

取消构件的线框模式

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.removeWireframe(['10001']);

将构件隔离

接口说明

将构件隔离

传入参数说明

名称	描述	类型	必填	示例
componentConfig	入参	object	是	{}
componentConfig.keys	构件的key	array	是	{keys: [‘10001’]}
componentConfig.visible	构件是否可见。0-隐藏，1-略微可见。默认值是1	number	否	{visible: 0}

使用示例

component.isolation({keys: ['10001'], visible: 0});

相关示例库
构件隔离

取消构件隔离

接口说明

取消构件隔离

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传参，则取消全部构件的隔离	array	否	[‘10001’]

使用示例

component.removeIsolation(['10001']);

设置构件是否可选中

接口说明

设置构件是否可选中

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key。若不传参，则取消全部构件的隔离	array	否	[‘10001’]

使用示例

component.selectable(['10001']);

清空不可选中的构件列表

接口说明

清空不可选中的构件列表。

使用示例

component.removeUnselectable();

筛选指定类型构件的id

接口说明

筛选指定类型构件的id

传入参数说明

名称	描述	类型	必填	示例
componentIds	构件的id	array	是	[‘10001’, ‘10002’]
modelKey	模型的key	string	是	‘1000001’
type	筛选的类型	string	是	‘门’

返回参数说明

名称	描述	类型	示例
ids	构件的id	array	[‘10001’]

使用示例

component.filterIdByType(['10001', '10002'], '1000001', '门');

筛选指定类型构件的key

接口说明

筛选指定类型构件的key

传入参数说明

名称	描述	类型	必填	示例
componentKeys	构件的key	array	是	[‘10001’, ‘10002’]
modelKey	模型的key	string	是	‘1000001’
type	筛选的类型	string	是	‘门’

返回参数说明

名称	描述	类型	示例
keys	构件的key	array	[‘10001’]

使用示例

component.filterKeyByType(['10001', '10002'], '1000001', '门');

相关示例库
分类隐藏

使用id查询构件的属性

接口说明

使用id查询构件的属性

传入参数说明

名称	描述	类型	必填	示例
id	构件的id	string	是	‘10001’
modelKey	模型的key	string	是	‘1000001’
callback	回调函数，用来接收查询结果	function	是	function(result) {}

使用示例

component.getAttributeById('10001', '1000001', function(result) {});

使用key查询构件的属性

接口说明

使用key查询构件的属性

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’
modelKey	模型的key	string	是	‘1000001’
callback	回调函数，用来接收查询结果	function	是	function(result) {}

使用示例

component.getAttributeByKey('10001', '1000001', function(result) {});

将构件离散

接口说明

将构件离散

传入参数说明

名称	描述	类型	必填	示例
componentConfig	入参	object	是	{}
componentConfig.keys	构件的key	string	是	[‘10001’]
componentConfig.x	x轴上的离散系数。默认是1	number	否	2
componentConfig.y	y轴上的离散系数。默认是1	number	否	2
componentConfig.z	z轴上的离散系数。默认是1	number	否	2

使用示例

component.explosion({ keys: ['10001'], x: 2, y: 2, z: 2 });

取消构件离散

接口说明

取消构件离散

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	否	[‘10001’]

使用示例

component.removeExplosion(['10001']);

设置构件的位置

接口说明

设置构件的位置

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’
构件的位置	构件的位置	array	是	[100, 200, 100]

使用示例

component.position('10001', [100, 200, 100]);

开启平移构件

接口说明

开启平移构件

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’

使用示例

component.translate('10001');

开启缩放构件

接口说明

开启缩放构件

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’

使用示例

component.scale('10001');

开启旋转构件

接口说明

开启旋转构件

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’

使用示例

component.rotate('10001');

重置构件变换

接口说明

重置构件变换

传入参数说明

名称	描述	类型	必填	示例
status	重置构件变换的同时是否关闭构件变换操作；true-是，false-否	boolean	是	true

使用示例

component.removeTransform(true);

获取构件的本地矩阵

接口说明

获取构件的本地矩阵

传入参数说明

名称	描述	类型	必填	示例
key	构件的key	string	是	‘10001’

返回参数说明

名称	描述	类型	示例
matrix	构件的本地矩阵	object	{element: [1, 0, 1,0, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]}

使用示例

component.getLocalMatrix('10001');

调整构件控制器的大小

接口说明

调整构件控制器的大小

传入参数说明

名称	描述	类型	必填	示例
status	调整大小的状态；true-调大，false-调小	boolean	是	true

使用示例

component.transformControlSize(true);

切换变换空间

接口说明

切换变换空间

传入参数说明

名称	描述	类型	必填	示例
status	设置变换空间的的状态。true-设置变换空间为局部的，false-设置变换空间为世界的	boolean	是	true

使用示例

component.switchTransformSpace(true);

切换轴的变换

接口说明

切换轴的变换

传入参数说明

名称	描述	类型	必填	示例
axis	轴:可选值：‘x’	‘y’	‘z’	string
status	轴的状态:true-显示，false-隐藏	boolean	是	true

使用示例

component.switchTransformAxis('x', true);

切换是否能发生构件变换

接口说明

切换是否能发生构件变换

传入参数说明

名称	描述	类型	必填	示例
status	是否可以发生构件变换。true-是，false-否	boolean	是	true

使用示例

component.switchEnableTransform(true);

获取构件的包围盒

接口说明

获取构件的包围盒

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.getBox(['10001']);

相关示例库
添加三位球状标签

获取全部构件的key

接口说明

获取全部构件的key

使用示例

var keys = component.getKeys();

相关示例库
住房类示例-隐藏

开启构件剖切

接口说明

开启构件剖切

传入参数说明

名称	描述	类型	必填	示例
keys	构件的key	array	是	[‘10001’]

使用示例

component.openCutting(['10001']);

相关示例库
模型剖切

关闭构件剖切

接口说明

关闭构件剖切

使用示例

component.closeCutting();

相关示例库
模型剖切

相关阅读

• 小红砖 | 前端三维库你不知道的事（一）
• 视图类 | 前端三维库你不知道的事（二）
• 模型类 | 前端三维库你不知道的事（三）
• 相机类 | 前端三维库你不知道的事（五）
• 标签类 | 前端三维库你不知道的事（六）
• 系统类 | 前端三维库你不知道的事（七）
• 调用类 | 前端三维库你不知道的事（八）
• 小红砖API2.0强势上线