preface

CubeTexture is often used as a sky background in three.js.

For example, the background of guangzhou Tower is using this method.

However, CubeTexture accepts an array of image paths as parameters, and the order of the images cannot be changed, so it may encounter some problems in actual development.

The problem

The biggest problem is the code snippet given by the official website. The image name is not direct enough. The code is as follows:

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']);Copy the code

If you happen to get a map that looks like this:

Px, nx, py, ny, pz, nz = px, BOTTOM, FRONT, LEFT, RIGHT, px, nx, py, pz, nz

The solution

The solution is to expand the six sides of the cube, mark BACK, BOTTOM, FRONT, LEFT, RIGHT, TOP and PX, Nx, PY, NY, Pz and NZ to each side, and then synchronize the reference map to the design and development.

conclusion

By means of reference graph, the naming difficulty of design is solved, and the placement sequence of developed images is solved.