Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: three.js r169
Symptom
Checklist
  1. Log map.name, flipY, colorSpace and image.height for every material map.
  2. Compare texture sources, since TextureLoader and CanvasTexture default to flipY true.
  3. Confirm the texture is not glTF-embedded, where flipY must stay false.
  4. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

Atlaslog (2026). Texture is upside down and text reads backwards. https://www.jingweizhi.com/en/cookbook/three-texture-flipY.html (accessed 2026-11-03).