title: I need to make these clouds extend to the left and right and go on forever. (Hard to explain so images are provided with further detail)
body: <p>So I am trying to make a cloud generation script that when going forward, left, or right it generates clouds infinitely.</p>
  <p>Here is an example of how it currently is, I would like it to generate clouds when moving left or right infinitely but currently it only generates clouds moving forwards infinitely. Arrows are provided in the example for better understanding. I apologize for not adding a image directly but I am unable to as I am a new user:</p>
  <p><a href="https://i.stack.imgur.com/4XzpZ.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/4XzpZ.jpg</a></p>
  <p>I would like to modify my script to make the clouds generate forward, left, and right.</p>
  <p>Here is my script:</p>
  <p><a href="https://pastebin.com/raw/vkTVrybQ" rel="nofollow noreferrer">https://pastebin.com/raw/vkTVrybQ</a></p>
  <pre><code>// HTML:
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot; &gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;title&gt;cloud generation&lt;/title&gt;
          &lt;link href=&quot;css/main.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
          &lt;script src=&quot;js/ThreeWebGL.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;js/ThreeExtras.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script id=&quot;vs&quot; type=&quot;x-shader/x-vertex&quot;&gt;
              varying vec2 vUv;
              void main() {
                  vUv = uv;
                  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
              }
          &lt;/script&gt;
          &lt;script id=&quot;fs&quot; type=&quot;x-shader/x-fragment&quot;&gt;
              uniform sampler2D map;
              uniform vec3 fogColor;
              uniform float fogNear;
              uniform float fogFar;
              varying vec2 vUv;
              void main() {
                  float depth = gl_FragCoord.z / gl_FragCoord.w;
                  float fogFactor = smoothstep( fogNear, fogFar, depth );
                  gl_FragColor = texture2D( map, vUv );
                  gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 );
                  gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
              }
          &lt;/script&gt;
  
          &lt;div class=&quot;container&quot;&gt;
              &lt;canvas id=&quot;panel&quot; width=&quot;10&quot; height=&quot;1&quot;&gt;&lt;/canvas&gt;
          &lt;/div&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  
  // CSS:
  
  *{
      margin:0;
      padding:0;
  }
  body {
      color:#fff;
      font:14px/1.3 Arial,sans-serif;
      background-image: url(../images/sky.jpg);
  }
  
  .container {
      height:1px;
  }
  
  // Javascript:
  
  // inner variables
  var canvas, ctx;
  var camera, scene, renderer, meshMaterial, mesh, geometry, i, f;
  var mouseX = 0, mouseY = 0;
  var startTime = new Date().getTime();
  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;
  
  if (window.attachEvent) {
      window.attachEvent('onload', main_init);
  } else {
      if(window.onload) {
          var curronload = window.onload;
          var newonload = function() {
              curronload();
              main_init();
          };
          window.onload = newonload;
      } else {
          window.onload = main_init;
      }
  }
  
  function main_init() {
  
      // creating canvas and context objects
      canvas = document.getElementById('panel');
      var ctx = canvas.getContext('2d');
  
      // preparing camera
      camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 5000);
      camera.position.z = 6000;
  
      // preparing scene
      scene = new THREE.Scene();
  
      // preparing geometry
      geometry = new THREE.Geometry();
  
      // loading texture
      var texture = THREE.ImageUtils.loadTexture('../images/clouds.png');
      texture.magFilter = THREE.LinearMipMapLinearFilter;
      texture.minFilter = THREE.LinearMipMapLinearFilter;
  
      // preparing fog
      var fog = new THREE.Fog(0x251d32, - 100, 5000);
  
      // preparing material
      meshMaterial = new THREE.MeshShaderMaterial({
          uniforms: {
              'map': {type: 't', value:2, texture: texture},
              'fogColor' : {type: 'c', value: fog.color},
              'fogNear' : {type: 'f', value: fog.near},
              'fogFar' : {type: 'f', value: fog.far},
  
          },
          vertexShader: document.getElementById('vs').textContent,
          fragmentShader: document.getElementById('fs').textContent,
          depthTest: false
      });
  
      // preparing planeMesh
      var planeMesh = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
      for (i = 0; i &lt; 10000; i++) {
          planeMesh.position.x = Math.random() * 1000 - 500;
          planeMesh.position.y = - Math.random() * Math.random() * 200 - 15;
          planeMesh.position.z = i;
          planeMesh.rotation.z = Math.random() * Math.PI;
          planeMesh.scale.x = planeMesh.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
  
          THREE.GeometryUtils.merge(geometry, planeMesh);
      }
  
      mesh = new THREE.Mesh(geometry, meshMaterial);
      scene.addObject(mesh);
  
      mesh = new THREE.Mesh(geometry, meshMaterial);
      mesh.position.z = - 10000;
      scene.addObject(mesh);
  
      // preparing new renderer and drawing it
      renderer = new THREE.WebGLRenderer({ antialias: false });
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      // change positions by mouse
      document.addEventListener('mousemove', onMousemove, false);
  
      // change canvas size on resize
      window.addEventListener('resize', onResize, false);
  
      setInterval(drawScene, 30); // loop drawScene
  }
  
  function onMousemove(event) {
      mouseX = (event.clientX - windowHalfX) * 0.3;
      mouseY = (event.clientY - windowHalfY) * 0.2;
  }
  
  function onResize(event) {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  function drawScene() {
      position = ((new Date().getTime() - startTime) * 0.1) % 10000;
  
      camera.position.x += mouseX * 0.01;
      camera.position.y += - mouseY * 0.01;
      camera.position.z = - position + 10000;
  
      renderer.render(scene, camera);
  }
  
  // ^ Please note I also use ThreeWebGL.js and ThreeExtras.js but these scripts are too large to paste here as they are APIS
  </code></pre>