染色插件
染色插件
染色是指对模型进行颜色填充或调整，以增强模型的视觉效果或表达特定的信息。
我们在SDK中提供的染色插件 ColorizerPlugin，是为了方便对BIM模型即BuildingLayer这个图层进行染色修改。
1. 功能说明
在场景中给BIM模型按需添加需要染色的构件部位。
2. 构造
在SDK中实例化染色插件，代码示例如下：
const colorizerPlugin = new ubm.ColorizerPlugin()
3. 属性
| 属性 | 类型 | 可选 | 说明 |
|---|---|---|---|
| field | string | --- | 着色属性 |
| layers | ILayer[] | --- | 着色图层 |
| effects | EffectItem[] | --- | 着色合集 |
| defaultEffect | Effect | --- | 默认着色效果 |
3.1 着色属性
根据field属性来判断如何进行染色，默认值为空，即间接染色；当不为空时，为直接染色。
如设置直接染色的字段为guid，代码示例如下：
colorizerPlugin.field = 'guid'
3.2 着色图层
设置对那些图层进行染色操作，这是一个图层集合。代码示例如下：
colorizerPlugin.layers = [layer, layer2]
3.3 着色合集
设置图层的着色效果，这是一个效果集合。
效果集合EffectItem的数据结构如下：
- 着色
interface EffectItem {
// 染色图层，此处单独设置的图层优先级最高
layers:ILayer[]
// 染色条件
condition: string|string[]|number[]
// 染色效果
effect: Effect
}
- 染色效果
interface Effect {
// 类型: `mesh-3d`
type: string
// 阴影，只有在给场景设置阴影才有效果
shadow: boolean
// 填充颜色
fill: Fill
// 填充轮廓
border?: Border
}
- 填充颜色
interface Fill {
// 填充颜色
color: string | number[]
// 填充颜色与原始材质的处理方式
colorMixMode?: ColorMixMode
}
- 填充轮廓
interface Border {
// 边的类型
type: Edges3DType
// 边的大小
size: number
// 颜色
color: string | number[]
// 边的扩展长度
extensionLength?: number
}
- 边的类型
// 素描风格'sketch' , 实线风格'solid'
type Edges3DType = 'sketch' | 'solid'
- 填充颜色与原始材质的处理方式
// 用颜色替换材质'replace' , 材质灰度'tint' , 颜色材质混合'multiply'
type ColorMixMode = 'replace' | 'tint' | 'multiply'
4. 方法
| 方法 | 说明 |
|---|---|
| addEffect() | 添加染色 |
| render() | 染色执行 |
| clear() | 清空染色 |
4.1 添加染色
addEffect(effectItem: EffectItem): void
参数effectItem的数据结构参考属性参数effects，注意此处为单个条件着色。
在模型加载后添加染色效果，代码示例如下：
colorizerPlugin.addEffect({
layers: [layer2],
condition: ["a6aa132d-ccd7-408f-b2f9-ed67350f3a70"],
effect: {
type: 'mesh-3d',
fill: { color: 'rgba(23, 153, 23,0.8)', colorMixMode: 'replace' },
border: {
type: 'solid',
color: 'rgba(23, 153, 223, 0.01)',
size: 1,
},
}
})
4.2 染色执行
render(): void
调用插件的 render() 方法，对设置的图层和着色条件效果进行着色处理，代码示例如下：
// 对上述条件进行着色处理
colorizerPlugin.render()
注：这一步很重要，进行了染色操作必须执行，否则染色效果不会生效。
4.3 清空染色
clear(): void
清空条件着色，回到原始效果。使用方法如下：
colorizerPlugin.clear()
5. 使用
染色的使用分为以下三步：
5.1 设置着色图层
区别于一般插件，染色插件在注册完后需要先设置插件的着色图层，再去调用方法。
我们使用插件的 layers 属性，来指定需要染色的图层，代码示例如下：
// 使用BIM模型
const layer = new ubm.BuildingLayer({...})
// 场景中添加图层
scene.layer.add(layer)
// 设置插件着色图层
colorizerPlugin.layers = [layer]
也可以对场景中的多个图层同时进行着色，代码示例如下：
// 初始化多个BIM模型图层
const layer = new ubm.BuildingLayer({...})
const layer2 = new ubm.BuildingLayer({...})
// 场景中添加多个图层
scene.layer.add([layer, layer2])
// 设置插件着色图层
colorizerPlugin.layers = [layer, layer2]
5.2 设置染色
图层的染色有两种使用形式：直接染色和间接染色。说明如下：
注：直接染色和间接染色不可同时使用。
- 直接染色
通过指定field过滤的属性名，然后在condition数组中添加对应属性值，可直接对具体的构件进行染色，此方式执行效率较高。
// 设置field
colorizerPlugin.field = 'guid'
// 设置着色条件及效果
colorizerPlugin.effects = [{
// 过滤出需要染色的构件
condition: ["442049d1-20b8-4e26-b2e0-c9938030630f", "f13ff8b1-ef43-4441-a84e-ee16a9ad555f"],
// 着色效果
effect: {
type: 'mesh-3d',
fill: { color: 'rgba(123, 53, 223,0.5)', colorMixMode: 'replace' },
border: {
type: 'solid',
color: 'rgba(229, 229, 229, 0.3)',
size: 1,
},
}
},...]
- 间接染色
插件默认就是间接染色，因为是对整个模型进行着色，所以不需要指定field，即field为空。但可以通过条件表达式来控制着色效果。
// 设置field
colorizerPlugin.field = ''
// 设置着色条件及效果
colorizerPlugin.effects = [{
// 对模型id为1的构件进行着色
condition:`$feature.id == 1`,
effect:{
type: 'mesh-3d',
fill: { color: 'green', colorMixMode:'replace' },
border: {
type: 'solid',
color: [10, 10, 10, 1],
size: 1,
},
}
},{
// 对构件分类为Planting的构件进行着色
condition:`$feature.of_category == "Planting"`,
effect:{
type: 'mesh-3d',
fill: { color: 'red', colorMixMode:'replace' }
}
}]
上述condition的条件语句也叫条件表达式，用于控制染色效果的显示。
表达式中构件变量需要使用 $feature. 作为前缀，后缀为模型上的构件属性。
注：模型构件信息可通过图层的点击事件返回值中得到，具体做法请参看图层简介的图层事件。
运算符前后需要有空格，如果运算对象是字符串，需要加上单引号，一些条件运算符如下所示：
| 类型 | 运算符 | 示例 |
|---|---|---|
| 大于 | > | $feature.id > 1 |
| 小于 | < | $feature.id < 1 |
| 等于 | == | $feature.id == 1 |
| 不等于 | != | $feature.id != 1 |
| 且 | && | $feature.id > 1 && $feature.of_category == "Planting" |
| 或 | || | $feature.id > 1 || $feature.id == 0 |
5.3 执行染色
即调用方法render()来让设置的染色效果在图层上生效。这一步很重要，未执行的话，则场景中不会显示染色效果。
BIMFlux AI
