How to generate a 3d skybox like this img

I have this img:

And the clouds are moving to left.

Its possible to generate a camera movement for seeing the clouds moving to a side?

Hint: The code of this “skybox” is this:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Cielo azul con nubes (Perlin Canvas2D)</title>
  <style>
    html, body {margin:0; padding:0; overflow:hidden; background:#87ceeb;}
    body, canvas {width:100vw; height:100vh;}
    #info {
      position: absolute; top: 10px; left: 10px;
      color: #222; background: rgba(255,255,255,0.85); padding: 8px; border-radius: 6px;
      font-family: sans-serif; font-size: 15px; z-index: 10;
    }
  </style>
</head>
<body>
<div id="info">
  Cielo azul con nubes blancas generadas por ruido Perlin (Canvas 2D).<br>
  ¡Esto funciona en cualquier navegador!
</div>
<canvas id="lienzo"></canvas>
<script>
// Perlin clásico 2D (Ken Perlin, simplificado)
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function lerp(a, b, t) { return a + t * (b - a); }
function grad(hash, x, y) {
  switch(hash & 3) {
    case 0: return  x + y;
    case 1: return -x + y;
    case 2: return  x - y;
    case 3: return -x - y;
  }
}
let p = [];
for (let i=0;i<256;++i) p[i]=i;
for (let i=0;i<256;++i) { let j=Math.floor(Math.random()*256); [p[i],p[j]]=[p[j],p[i]];}
p = p.concat(p);

function noise(x, y) {
  let X = Math.floor(x) & 255, Y = Math.floor(y) & 255;
  x -= Math.floor(x); y -= Math.floor(y);
  let u = fade(x), v = fade(y);
  let A = p[X]+Y, AA = p[A], AB = p[A+1];
  let B = p[X+1]+Y, BA = p[B], BB = p[B+1];
  return lerp(
    lerp(grad(p[AA], x, y), grad(p[BA], x-1, y), u),
    lerp(grad(p[AB], x, y-1), grad(p[BB], x-1, y-1), u),
    v
  );
}

// fBm para nubes
function fbm(x, y, t) {
  let sum=0, amp=1, freq=1, norm=0;
  for(let i=0;i<5;++i){
    sum += amp * noise(x*freq + t*0.03, y*freq);
    norm += amp;
    freq *= 2;
    amp *= 0.55;
  }
  return sum/norm;
}

const canvas = document.getElementById('lienzo');
const ctx = canvas.getContext('2d');
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);

function dibuja(t) {
  let w=canvas.width, h=canvas.height;
  let img = ctx.getImageData(0,0,w,h);
  let data = img.data;
  for(let y=0;y<h;y++) for(let x=0;x<w;x++) {
    // Mapeo cielo a [0,1] vertical
    let yy = y/h;
    // Gradiente cielo azul
    let azul = lerp(255, 255, Math.pow(yy,1.7));
    let r = lerp(0, 0, Math.pow(yy,1.7));
    let g = lerp(127, 255, Math.pow(yy,1.7));
    // Coordenadas perlin
    let fx = x/w, fy = y/h;
    // Nubes Perlin/fBm
    let n = fbm(fx*3, fy*1.3, t/1000);
    n = (n+1)/2;
    // Más contraste, solo lo alto es nube
    let nubes = n > 0.61 ? (n-0.61)/0.39 : 0;
    nubes = Math.pow(nubes, 0.45); // bordes suaves pero cuerpo blanco
    // Combinación final
    let rr = lerp(r, 255, nubes),
        gg = lerp(g, 255, nubes),
        bb = lerp(azul, 255, nubes);
    let idx = (y*w+x)*4;
    data[idx]   = rr;
    data[idx+1] = gg;
    data[idx+2] = bb;
    data[idx+3] = 255;
  }
  ctx.putImageData(img,0,0);
  requestAnimationFrame(dibuja);
}
dibuja(performance.now());
</script>
</body>
</html>

t*2 - speed, direction.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Cielo azul con nubes (Perlin Canvas2D)</title>
  <style>
    html, body {margin:0; padding:0; overflow:hidden; background:#87ceeb;}
    body, canvas {width:100vw; height:100vh;}
    #info {
      position: absolute; top: 10px; left: 10px;
      color: #222; background: rgba(255,255,255,0.85); padding: 8px; border-radius: 6px;
      font-family: sans-serif; font-size: 15px; z-index: 10;
    }
  </style>
</head>
<body>
<div id="info">
  Cielo azul con nubes blancas generadas por ruido Perlin (Canvas 2D).<br>
  ¡Esto funciona en cualquier navegador!
</div>
<canvas id="lienzo"></canvas>
<script>
// Perlin clásico 2D (Ken Perlin, simplificado)
function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
function lerp(a, b, t) { return a + t * (b - a); }
function grad(hash, x, y) {
  switch(hash & 3) {
    case 0: return  x + y;
    case 1: return -x + y;
    case 2: return  x - y;
    case 3: return -x - y;
  }
}
let p = [];
for (let i=0;i<256;++i) p[i]=i;
for (let i=0;i<256;++i) { let j=Math.floor(Math.random()*256); [p[i],p[j]]=[p[j],p[i]];}
p = p.concat(p);

function noise(x, y) {
  let X = Math.floor(x) & 255, Y = Math.floor(y) & 255;
  x -= Math.floor(x); y -= Math.floor(y);
  let u = fade(x), v = fade(y);
  let A = p[X]+Y, AA = p[A], AB = p[A+1];
  let B = p[X+1]+Y, BA = p[B], BB = p[B+1];
  return lerp(
    lerp(grad(p[AA], x, y), grad(p[BA], x-1, y), u),
    lerp(grad(p[AB], x, y-1), grad(p[BB], x-1, y-1), u),
    v
  );
}

// fBm para nubes
function fbm(x, y, t) {
  let sum=0, amp=1, freq=1, norm=0;
  for(let i=0;i<5;++i){
    sum += amp * noise(x * freq + (t * 0.0005), y * freq); // Двигаем облака вправо
    norm += amp;
    freq *= 2;
    amp *= 0.55;
  }
  return sum/norm;
}

const canvas = document.getElementById('lienzo');
const ctx = canvas.getContext('2d');
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resize();
window.addEventListener('resize', resize);

function dibuja(t) {
  let w=canvas.width, h=canvas.height;
  let img = ctx.getImageData(0,0,w,h);
  let data = img.data;
  for(let y=0;y<h;y++) for(let x=0;x<w;x++) {
    // Mapeo cielo a [0,1] vertical
    let yy = y/h;
    // Gradiente cielo azul
    let azul = lerp(255, 255, Math.pow(yy,1.7));
    let r = lerp(0, 0, Math.pow(yy,1.7));
    let g = lerp(127, 255, Math.pow(yy,1.7));
    // Coordenadas perlin
    let fx = x/w, fy = y/h;
    // Nubes Perlin/fBm
    let n = fbm(fx*3, fy*1.3, t*2);
    n = (n+1)/2;
    // Más contraste, solo lo alto es nube
    let nubes = n > 0.61 ? (n-0.61)/0.39 : 0;
    nubes = Math.pow(nubes, 0.45); // bordes suaves pero cuerpo blanco
    // Combinación final
    let rr = lerp(r, 255, nubes),
        gg = lerp(g, 255, nubes),
        bb = lerp(azul, 255, nubes);
    let idx = (y*w+x)*4;
    data[idx]   = rr;
    data[idx+1] = gg;
    data[idx+2] = bb;
    data[idx+3] = 255;
  }
  ctx.putImageData(img,0,0);
  requestAnimationFrame(dibuja);
}
dibuja(performance.now());
</script>
</body>
</html>