title: Three.js: flip image loaded with loadTextureCube
body: <p>I have a legacy code snippet that has long since been part of a web application. The goal is to render a cube from 6 image urls via three.js. The problem is, that the bottom image is flipped around on its y axis. All other sides look fine.</p>
  
  <p>There is no way to flip the original image, since they are provided by an external service. Also when I open the bottom image directly, it is displayed correctly, only in the three.js cube its flipped.</p>
  
  <p>Since I have no prior experience with three.js, I first looked at the documentation for this functionality and realized that the code used in our script is deprecated. unfortunately there is no detailed documentation of the old function (THREE.ImageUtils.loadTextureCube) - or I was simply unable to find it (if someone knows where it is, a link would be great!).</p>
  
  <p>I know that for the long term, a reimplementation to replace all deprecated functions would in order, but since this would take a lot more time (for someone unfamiliar with three.js), I first wanted to check if the problem can be fixed using the existing code base.</p>
  
  <p>I read in various other posts/issues that this is a known issue because three.js for some internal reason defaults to flipY=true on textures. The problem I have is that I don't know (due to lack of documentation) how to change this parameter on one side of the cube only. I expect a function can be applied to the loader that could update this parameter for one of the images or a transformation could be applied to the loaded image afterwards.</p>
  
  <p>I really hope somebody knows (remembers) how this can be achieved with the old loader function.</p>
  
  <p>The following partial code is from my script:</p>
  
  <pre><code>// passed list of urls (images.bottom is flipped around)
  var urls = [ images.left, images.right, images.top, images.bottom, images.back, images.front ];
  
    // SCENE
    scene = new THREE.Scene();
  
    // TEXTURES
    textureCube = THREE.ImageUtils.loadTextureCube( urls );
    textureCube.format = THREE.RGBFormat;
    textureCube.mapping = THREE.CubeReflectionMapping;
  
    // MATERIALS
    var cubeShader = THREE.ShaderLib[ "cube" ];
    var cubeMaterial = new THREE.ShaderMaterial( {
      fragmentShader: cubeShader.fragmentShader,
      vertexShader: cubeShader.vertexShader,
      uniforms: cubeShader.uniforms,
      depthWrite: false,
      side: THREE.BackSide
    } );
    cubeMaterial.uniforms[ "tCube" ].value = textureCube;
  
    var cubeGeometry = new THREE.BoxGeometry(50,50,50);
  
    cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
    scene.add( cube );
  
    // RENDER
    renderer = new THREE.WebGLRenderer();
    renderer.autoClear = false;
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( containerWidth, containerHeight );
    renderer.setFaceCulling( THREE.CullFaceNone );
    $container.append( renderer.domElement );
    ...
  </code></pre>