WebGL flipping/inverting a texture as you load it

  • Thomassbull
    Likes 0

    Problem Description

    Hey Faraan,

    I’m doing your three.js tutorial over on udemy, and really enjoying it so far.

    I’ve just completed lecture 6, and trying to tweek the cube so that when it loads the texture it flips/inverts it (I think 180 in the z plane), so that from the outside of the cube images are reversed, and when you zoom in inside the cube the images are correct. I realise this could be done in photoshop, but im on a bit of a quest to make it work, my research isn’t going very well.

    I found this on stackoverflow but cant get it to work in the z +/ implement it properly

    texture.flipY = false;

    If im on the right track, where in the line below would it go?

    new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('img/2.png'), side: THREE.DoubleSide}),

     

    Thanks in advance

     

    Tom

  • Sonar Systems admin
    Likes 1

    Hello Tom,

    This should provide some more information https://github.com/threeDart/three.dart/issues/124

    Kind regards

    Frahaan Hussain


    This reply has been verified.
  • Thomassbull
    Likes 0

    Thanks for that Frahaan, I have given it a good read but don’t think its the same as what I’m trying to acheve.

    If you check the example, I have the camera at point 0, so am inside the cube. I’d like it so the text is the correct way round when you are inside.

    http://whataloadofbull.com/DevTek

    Thanks again

    Tom

  • Thomassbull
    Likes 0

    Cheers for that, I’ll read further into it and report back.

     

    Thanks again

     

    Tom

     

     

  • Sonar Systems admin
    Likes 0

    Your very welcome.

Login to reply