Three.js 立方紋理圖片命名對照

前言

Three.js 中 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 分別標註到每一個面，而後將參考圖同步給設計以及開發。

總結

經過參考圖的方式，既解決了設計的命名困難，又解決了開發的圖片置入順序。