Textures and mapping

• Set colorSpace to SRGBColorSpace only on color maps, never on data maps.
• Use RepeatWrapping with repeat or scaled UVs to tile a texture across a surface.
• Draw gradient ramps into a CanvasTexture with ClampToEdgeWrapping.

const loader = new THREE.TextureLoader();

const colorMap = loader.load('/textures/terrain-color.jpg', function (tex) {
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.wrapS = THREE.RepeatWrapping;
  tex.wrapT = THREE.RepeatWrapping;
  tex.repeat.set(4, 4);
  tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
  tex.needsUpdate = true;
});

const material = new THREE.MeshStandardMaterial({
  map: colorMap,
  roughness: 0.9,
  metalness: 0.0
});

function makeGradientTexture(stops) {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 1;
  const ctx = canvas.getContext('2d');

  const gradient = ctx.createLinearGradient(0, 0, 256, 0);
  stops.forEach(function (s) {
    gradient.addColorStop(s.at, s.color);
  });
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 256, 1);

  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.wrapS = THREE.ClampToEdgeWrapping;
  return texture;
}

const ramp = makeGradientTexture([
  { at: 0.0, color: '#1f5fd0' },
  { at: 0.5, color: '#f0a020' },
  { at: 1.0, color: '#d0453a' }
]);

• Custom geometry without a uv attribute renders as a flat single color.
• UV values outside 0 to 1 stretch the edge pixel unless wrapping is RepeatWrapping.