立方体纹理CubeTexture是一种特殊的纹理,一般用于实现天空盒或者环境贴图,虽然在微信小程序框架中一般使用普通全景纹理,但仍然提供给开发者一个选择。
通过加载器
立方体纹理的创建也可以通过加载的方式创建。用xml加载:
<xr-asset-load
type="cube-texture" asset-id="sky" src="/assets/sky/"
options="faces: right.jpg left.jpg top.jpg bottom.jpg front.jpg back.jpg,wrapU:1,wrapV:2"
/>
或是使用代码加载:
scene.assets.loadAsset({
type: 'cube-texture', assetId: 'sky', src: '/assets/sky/',
options: {faces: ['right.jpg', 'left.jpg', 'top.jpg', 'bottom.jpg', 'front.jpg', 'back.jpg']}
});
options中除了faces用于配置每个面的纹理地址,其他参数和TextureLoader一致。
代码创建
也可以代码创建,通过注册加入资源系统:
function createGreenCubeTexture(scene: XrFrame.Scene) {
const buffer = new Uint8Array([0, 1, 0, 1]);
return scene.createTexture({
type: xrFrameSystem.ETextureType.Cube,
slices: 6,
source: [buffer, buffer, buffer, buffer, buffer, buffer],
pixelFormat: xrFrameSystem.ETextureFormat.RGBA8,
width: 1,
height: 1,
magFilter: xrFrameSystem.EFilterMode.NEAREST,
minFilter: xrFrameSystem.EFilterMode.NEAREST,
wrapU: xrFrameSystem.EWrapMode.CLAMP_TO_EDGE,
wrapV: xrFrameSystem.EWrapMode.CLAMP_TO_EDGE,
anisoLevel:1
});
}
// 可以将其注册到资源系统
xrFrameSystem.registerCubeTexture('green', createGreenCubeTexture);
可见其实它也是一种普通的纹理,只不过类型不一样。
立方体纹理也支持更新,和普通纹理基本一致,只不过必须提供slice参数。