← Three.jsGradient Skybox

HorizonZenithBands 8

import kleur from "@driangle/kleur";
import * as THREE from "three";

const horizon = kleur("#ff7b54");
const zenith  = kleur("#1a1a3e");

for (let i = 0; i < 8; i++) {
  const t = i / 7;
  const [r, g, b] = kleur
    .mix(horizon, zenith, t)
    .toNormalized();
  uniforms.skyColors.value[i] =
    new THREE.Color(r, g, b);
}

#ff7b54vec3(1.000, 0.482, 0.329)

#de6d51vec3(0.871, 0.427, 0.318)

#be5f4evec3(0.745, 0.373, 0.306)

#9d514bvec3(0.616, 0.318, 0.294)

#7c4447vec3(0.486, 0.267, 0.278)

#5b3644vec3(0.357, 0.212, 0.267)

#3b2841vec3(0.231, 0.157, 0.255)

#1a1a3evec3(0.102, 0.102, 0.243)