Three.js 立方纹理图片命名对照

前言

Three.js 中 CubeTexture （立方纹理）经常用作天空背景。

如案例中，广州塔的背景就是使用该方法。

但是 CubeTexture 接收图片路径的数组作为参数，且图片的顺序不可更改，再实际开发中可能会遇到一些问题。

天空使用 CubeTexture 实现

问题

最大的问题就是官网给的代码片段，图片命名不够直接，代码如下：

const scene = new THREE.Scene();
scene.background = new THREE.CubeTextureLoader()
	.setPath( 'textures/cubeMaps/' )
	.load( [
		'px.png',
		'nx.png',
		'py.png',
		'ny.png',
		'pz.png',
		'nz.png'
	] );

如果碰巧设计同学给到的贴图是这样的：

那 BACK、BOTTOM、FRONT、LEFT、RIGHT、TOP 和 px、nx、py、ny、pz、nz 怎么一一对应呢？

解决方法

解决的方式，就是将立方体的 6 个面展开来，将 BACK、BOTTOM、FRONT、LEFT、RIGHT、TOP 和 px、nx、py、ny、pz、nz 分别标注到每个面，然后将参考图同步给设计以及开发。

立方体的展开图

总结

通过参考图的方式，既解决了设计的命名困难，又解决了开发的图片置入顺序。