# 模型属性和接口
提示
模型使用Model组件渲染，更新属性或调用接口时需要先获取模型渲染组件。
import { Model } from '@tx3d/core';
// 获取模型渲染组件
const model = entity.getComponent( Model );
1
2
3
4
2
3
4
# 属性
🌏 opacity 设置模型透明度，只写。
// 设置模型透明度
model.opacity = 0.75;
1
2
2
🌏 color 设置模型颜色，只写。
// 设置模型颜色
model.color = '#ff0dea';
1
2
2
注意
如果多个模型共享一份材质，修改其中一个模型的颜色会导致其它模型的颜色也发生改变。可以在加载模型时将"sharedMaterials"参数设置为false规避这个问题，如下所示：
// 加载GLTF模型
engine.loadGLTF(
'assets/models/风机.glb', // glb数据
// 模型实体参数
{
sharedMaterials: false // 设置不共享材质
}
);
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
🌏 subModels 获取子模型列表，只读。
// 获取子模型列表
const subModels = model.subModels;
1
2
2
提示
子模型结构，详见SubModel。
# 接口
🌏 replaceMaterial 替换默认材质
import { ShaderMaterial } from 'three';
// 新建一个ShaderMaterial
const material = new ShaderMaterial( {
......
......
} );
// 替换默认材质
model.replaceMaterial( material );
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
提示
某些特殊需求，如果默认的模型效果无法满足，可以通过替换材质的方式实现。
注意
Model组件销毁时不会释放“替换材质及其相关的纹理资源”，需要手动进行释放！
🌏 recoverMaterial 恢复默认材质
// 恢复默认材质
model.recoverMaterial();
1
2
2
注意
调用Model的replaceMaterial和recoverMaterial接口会替换/恢复所有SubModel的材质。如果想单独替换/恢复某一个SubModel的材质，可以通过调用SubModel的replaceMaterial和recoverMaterial接口实现。
🌏 setClipping 设置裁剪
import { Plane, Vector3 } from 'three';
// 构建裁剪面
const plane = new Plane().setFromNormalAndCoplanarPoint( new Vector3( 0.0, 1.0, 0.0 ), new Vector3( 0.0, 0.0, 0.0 ) );
// 裁剪模型
model.setClipping( { clippingPlanes: [ plane ] } );
// 取消裁剪
model.setClipping( { clippingPlanes: null } );
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
裁剪参数，详见ClippingParameters。
🌏 setEdge 是否显示模型边框
// 显示模型边框
model.setEdge( true, { color: '#f2ed57' } );
// 隐藏模型边框
model.setEdge( false );
1
2
3
4
5
2
3
4
5
提示
边框设置参数，详见EdgeParameters。
🌏 setGlow 设置是否启用Glow效果
// 启用Glow效果
model.setGlow( true, { color: '#9999ef', power: 1.25 } );
// 取消Glow效果
model.setGlow( false );
1
2
3
4
5
2
3
4
5
提示
Glow效果设置参数，详见GlowParameters。
🌏 setHighlight 设置是否高亮
// 高亮模型
model.setHighlight( true, { color: '#ff0000', opacity: 0.5 } );
// 取消高亮
model.setHighlight( false );
1
2
3
4
5
2
3
4
5
提示
高亮设置参数，详见HighlightParameters。
🌏 setStencil设置模板参数
import { GreaterEqualStencilFunc, ReplaceStencilOp } from 'three';
// 设置模板参数
model.setStencil( {
stencilWrite: true, // 开启模板比较
stencilRef: 1.0, // 模板比较基准值
stencilFunc: GreaterEqualStencilFunc, // 模板比较方法
stencilZPass: ReplaceStencilOp // 模板比较和深度比较都成功时操作
} );
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
提示
模板参数，详见StencilParameters。