Style(modifier)

Style物体的样式效果

new Style(modifier)
thing/src/resources/Style.js, line 320

对象的样式，可以改变对象的颜色、轮廓颜色等。
Parameters:
Name Type Description
modifier object 修改器。

Extends

Members

alphaMap :THING.ImageTexture
thing/src/resources/Style.js, line 2086

设置/获取 透明纹理
Example
// 设置透明纹理
style.alphaMap = new THING.ImageTexture('path/to/alphaMap.png');
// 或使用 canvas：
// style.alphaMap = new THING.ImageTexture({ resource: canvas });

aoMap :THING.ImageTexture
thing/src/resources/Style.js, line 2154

设置/获取 环境光遮蔽纹理
Example
// 设置环境光遮蔽纹理
style.aoMap = new THING.ImageTexture('path/to/aoMap.png');
// 或使用 canvas：
// style.aoMap = new THING.ImageTexture({ resource: canvas });

blendingType :THING.BlendingType
thing/src/resources/Style.js, line 1901

设置/获取 叠加类型
Example
style.blendingType = THING.BlendingType.Additive;

clippingPlanes :Array.<THING.ClippingPlanes>
thing/src/resources/Style.js, line 2366

设置/获取 裁剪平面 在范围内的片元会被裁剪
Example
let clippingPlanes = [
	{ direction: [0, -1, 0], height: 10 }, // top
	{ direction: [0, 1, 0], height: 10 }, // bottom
	{ direction: [-1, 0, 0], height: 10 }, // right
	{ direction: [1, 0, 0], height: 10 }, // left
	{ direction: [0, 0, -1], height: 10 }, // front
	{ direction: [0, 0, 1], height: 10 } // back
];

let clippingPlanesObject = new THING.ClippingPlanes({
	parent: object,
	planes: clippingPlanes,
});

object.query('*', { includeSelf: true }).style.clippingPlanes = clippingPlanesObject;

color :number|string|Array.<number>|StyleColorOperationCallback
thing/src/resources/Style.js, line 2251

设置/获取 颜色值 如果该属性是一个方法,将该方法发返回值作为颜色值
Example
// 设置颜色为红色
style.color = [1, 0, 0]; // RGB
// 使用函数设置颜色
style.color = function(baseValue) {
  return [baseValue[0], baseValue[1], baseValue[2]];
};

colorMapping :THING.ImageTexture
thing/src/resources/Style.js, line 2137

设置/获取 颜色映射纹理
Example
// 设置颜色映射纹理
style.colorMapping = new THING.ImageTexture('path/to/colorMapping.png');
// 或使用 canvas：
// style.colorMapping = new THING.ImageTexture({ resource: canvas });

depthTest :boolean
thing/src/resources/Style.js, line 1958

是否开启深度测试
Example
style.depthTest = true;

depthWrite :boolean
thing/src/resources/Style.js, line 1972

是否写入深度
Example
style.depthWrite = true;

edge :StyleEdgeResult
thing/src/resources/Style.js, line 2387

设置/获取 边框效果
Example
// 设置边框效果
style.edge = {
	enable: true, // 是否开启边框
	color: [1, 1, 1], // 边框颜色
	opacity: 1, // 边框不透明度
	glow: false, // 边框是否开启发光效果
	thresholdAngle: 0.5 // 边框阈值角度
};

effect :StyleEffectResult
thing/src/resources/Style.js, line 2421

设置/获取 物体级后期配置 需配合app.camera.effect中的属性配置生效
Example
// 设置物体级后期配置
style.effect = {
	glow: true, // 是否开启发光效果
	innerGlow: true, // 是否开启内发光效果
	lineBloom: true, // 是否开启线性发光效果
	tailing: true, // 是否开启拖尾效果
	radial: true, // 是否开启扩散效果
	ghosting: true // 是否开启残影效果
};

emissive :number|string|Array.<number>|StyleColorOperationCallback
thing/src/resources/Style.js, line 2315

设置/获取 自发光颜色值 值越高,颜色越亮(越白)
Example
// 设置自发光颜色为白色
style.emissive = [1, 1, 1]; // RGB
// 使用函数设置自发光颜色
style.emissive = function(baseValue) {
  return [baseValue[0], baseValue[1], baseValue[2]];
};

emissiveMap :THING.ImageTexture
thing/src/resources/Style.js, line 2103

设置/获取 自发光纹理
Example
// 设置自发光纹理
style.emissiveMap = new THING.ImageTexture('path/to/emissiveMap.png');
// 或使用 canvas：
// style.emissiveMap = new THING.ImageTexture({ resource: canvas });

envMap :THING.ImageTexture
thing/src/resources/Style.js, line 2069

设置/获取 环境光纹理
Example
// 设置环境光纹理
style.envMap = new THING.ImageTexture('path/to/envMap.png');
// 或使用 canvas：
// style.envMap = new THING.ImageTexture({ resource: canvas });

envMapping :boolean
thing/src/resources/Style.js, line 1986

是否开启环境贴图
Example
style.envMapping = true;

image :THING.ImageTexture
thing/src/resources/Style.js, line 2028

设置/获取当前贴图类型下的图片资源（需要传 `THING.ImageTexture`）。若要使用 `canvas` 作为纹理，请先包装成 `new THING.ImageTexture({ resource: canvas })`。
Example
style.image = new THING.ImageTexture('path/to/texture.png');

// Use a canvas as texture
let canvas = document.createElement('canvas');
// draw pixels to canvas...
style.image = new THING.ImageTexture({ resource: canvas });

imageSlotType :ImageSlotType
thing/src/resources/Style.js, line 2004

设置当前的纹理类型,主要在设置纹理参数时使用
Example
style.imageSlotType = THING.ImageSlotType.Map;

map :THING.ImageTexture
thing/src/resources/Style.js, line 2052

设置/获取 基础纹理
Example
// 设置基础纹理
style.map = new THING.ImageTexture('path/to/texture.png');

// Use a canvas as texture
let canvas = document.createElement('canvas');
// draw pixels to canvas...
style.map = new THING.ImageTexture({ resource: canvas });

metalness :number|StyleValueOperationCallback
thing/src/resources/Style.js, line 2274

设置/获取 金属度 如果该属性是一个方法,将该方法发返回值作为金属度
取值范围0~1 具有较高金属度的材质表面通常具有金属的光泽和反射特性
可以控制材质表面的反射特性，从而影响光照效果和最终的视觉呈现
Example
// 设置金属度为0.8
style.metalness = 0.8;
// 使用函数设置金属度
style.metalness = function(baseValue) {
  return baseValue * 0.8;
};

normalMap :THING.ImageTexture
thing/src/resources/Style.js, line 2120

设置/获取 法线纹理
Example
// 设置法线纹理
style.normalMap = new THING.ImageTexture('path/to/normalMap.png');
// 或使用 canvas：
// style.normalMap = new THING.ImageTexture({ resource: canvas });

onDispose :OnDisposeCallback
base.thing/src/common/RefCountObject.js, line 30

当引用计数等于 0 时。
Overrides:

opacity :number|StyleValueOperationCallback
thing/src/resources/Style.js, line 2230

设置/获取 不透明度 如果该属性是一个方法,将该方法发返回值作为不透明度
Example
// 设置不透明度为0.5
style.opacity = 0.5;
// 使用函数设置不透明度
style.opacity = function(baseValue) {
  return baseValue * 0.5;
};

outlineColor :number|string|Array.<number>
thing/src/resources/Style.js, line 2332

设置/获取 勾边颜色
Example
// 设置勾边颜色为黑色
style.outlineColor = [0, 0, 0]; // RGB

refCount :number
base.thing/src/common/RefCountObject.js, line 103

获取引用计数。
Overrides:
Example
// 创建引用计数对象
let refObj = new THING.BASE.RefCountObject();

// 获取引用计数
console.log(refObj.refCount); // 1

refObj.addRef();
console.log(refObj.refCount); // 2

roughness :number|StyleValueOperationCallback
thing/src/resources/Style.js, line 2296

设置/获取 粗糙度 如果该属性是一个方法,将该方法发返回值作为粗糙度
取值范围0~1 具有较高粗糙度的材质表面通常是不规则、粗糙和光滑度较低的，如砂纸、混凝土等材质。
可以控制材质表面的细节和光滑程度，从而影响光照效果和最终的视觉呈现
Example
// 设置粗糙度为0.6
style.roughness = 0.6;
// 使用函数设置粗糙度
style.roughness = function(baseValue) {
  return baseValue * 0.6;
};

sideType :THING.SideType
thing/src/resources/Style.js, line 1915

设置/获取 正面|背面|双面渲染
Example
style.sideType = THING.SideType.Double;

transparent :boolean
thing/src/resources/Style.js, line 1930

设置/获取 是否透明(即我们平时说的透明物体还是不透明物体,渲染排序时这两种物体在不同的队列中)如果transparent为false,即便设置透明度,或者对象是用的贴图是透明的,仍然没有透明效果
Example
style.transparent = true;

uv :StyleUVMatrixResult
thing/src/resources/Style.js, line 2180

设置/获取 纹理坐标矩阵
Example
// 获取当前纹理坐标矩阵
let uvMatrix = style.uv;
// 设置纹理坐标矩阵
style.uv = {
  offset: [0, 0],
  repeat: [1, 1],
  center: [0, 0],
  rotation: 0
};

wireframe :boolean
thing/src/resources/Style.js, line 1944

是否开启线框模式(绘制时使用组成mesh的三角面线框)
Example
style.wireframe = true;

Methods

addRef()
base.thing/src/common/RefCountObject.js, line 53

增加引用计数。
Overrides:
Example
// 创建引用计数对象
let refObj = new THING.BASE.RefCountObject();
console.log(refObj.refCount); // 1

// 增加引用计数
refObj.addRef();
console.log(refObj.refCount); // 2

beginDefaultValues()
thing/src/resources/Style.js, line 1477

Begin to set default values.
Example
style.beginDefaultValues();

endDefaultValues()
thing/src/resources/Style.js, line 1515

End to set default values.
Example
style.endDefaultValues();

release()
base.thing/src/common/RefCountObject.js, line 74

释放引用计数。
Overrides:
Example
// 创建引用计数对象
let refObj = new THING.BASE.RefCountObject();
refObj.addRef(); // 引用计数为2

// 设置释放回调
refObj.onDispose = function() {
  console.log('对象已被释放');
};

// 释放引用计数
refObj.release(); // 引用计数减为1
refObj.release(); // 引用计数减为0，触发onDispose回调