I have an array of 6 predefined textures for a cube that has to be applied in the correct order to perform troubleshooting:

  [
        'textures/directions/xpos.png',
        'textures/directions/xneg.png',
        'textures/directions/ypos.png',
        'textures/directions/yneg.png',
        'textures/directions/zpos.png',
        'textures/directions/zneg.png'
    ]

I load it through THREE.TextureLoader() and the order of loaded textures in the array is always correct.

var materialArray = []
materialArray.push(new THREE.MeshBasicMaterial( { map: file } ))

When I apply materialArray to the cube it renders correctly for the first 3-7 times

this.mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), materialArray)
this.scene.add(this.mesh)

Correct order:

and when I overload the page with a refresh it flips textures and displays incorrect order. What is the right way to implement the order?

Incorrect order: