Atlaslog / Field Notes / three.js rendering
Field note · three.js rendering
Texture is upside down and text reads backwards
Quick answer
The same ground-sign texture loads correctly through TextureLoader but appears flipped when generated from canvas or binary data. three.js defaults flipY per source: true for image and canvas textures, false for DataTexture and glTF-embedded textures.
Symptom
- Text on the texture is upside down and the bottom of the image sits at the top.
- Only some materials are affected: the glTF model is correct while the generated DataTexture is reversed.
- Changing flipY back immediately flips the image again.
Checklist
- Log map.name, flipY, colorSpace and image.height for every material map.
- Compare texture sources, since TextureLoader and CanvasTexture default to flipY true.
- Confirm the texture is not glTF-embedded, where flipY must stay false.
- Test with a texture that has a distinct colour block in one corner.
Fix
For a DataTexture used like an image, set tex.flipY to true, tex.colorSpace to THREE.SRGBColorSpace and tex.needsUpdate to true. Alternatively invert V on the geometry with uv.setY(i, 1 - uv.getY(i)) when only one mesh needs the correction.
Code
mesh.material.map && console.log({
name: mesh.material.map.name,
flipY: mesh.material.map.flipY,
colorSpace: mesh.material.map.colorSpace,
imageHeight: mesh.material.map.image.height
});var tex = new THREE.DataTexture(bytes, width, height, THREE.RGBAFormat);
tex.flipY = true;
tex.colorSpace = THREE.SRGBColorSpace;
tex.needsUpdate = true;
Watch out
- Setting flipY true on glTF textures globally, which mirrors models that were previously correct.
- Correcting twice after an exporter already wrote flipped UVs, so the texture ends up upside down again.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Texture is upside down and text reads backwards. https://www.jingweizhi.com/en/cookbook/three-texture-flipY.html (accessed 2026-11-03).