跳到主要内容

纹理

纹理就像画皮，要什么贴什么

纹理（Texture）常用于附着在网格模型（Mesh）表面，以简单快速地表现物体表面的颜色。

示例​

使用​

Tinoe 内的纹理通过Stage提供的资源加载能力来创建，加载过程是异步的。

// 2D纹理
const texture = await stage.loader.loadTexture2D('/path/to/source');

// 纹理盒
const textureCube = await stage.loader.loadTextureCube([
  face: TextureCubeFace.PositiveX,
  url: 'path/to/facePosX'
],[
  face: TextureCubeFace.PositiveY,
  url: 'path/to/facePosY'
],[
  face: TextureCubeFace.PositiveZ,
  url: 'path/to/facePosZ'
],[
  face: TextureCubeFace.NegativeX,
  url: 'path/to/faceNegX'
],[
  face: TextureCubeFace.NegativeY,
  url: 'path/to/faceNegY'
],[
  face: TextureCubeFace.NegativeZ,
  url: 'path/to/faceNegZ'
]);

除此之外，Tinoe 还提供了CanvasTexture方便用户从画布创建纹理：

// 创建Canvas元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// 绘制纯红色canvas
if (context) {
  context.fillStyle = 'red';
  context.fillRect(0, 0, 16, 16);
}

// 使用上述canvas创建纹理
const texture = new CanvasTexture({
  source: canvas,
});

纹理属性​

纹理创建后可以设置 filterMode、wrapMode、mipmap、anisotropyLevel 等属性，属性含义详见 这里

const tex = await stage.loader.loadTexture2D('/path/to/source');

tex.wrapModeS = TextureWrapMode.Repeat;
tex.wrapModeT = TextureWrapMode.Repeat;

tex.anisotropyLevel = 16;

API​

Texture

Q&A​