title: Change innerWidth and innerHeight to custom size THREEjs
body: <p>When I launch the code below it automatically calculate the height and width. Is there any way I can set the window where the function launches in to a custom size? </p>
  
  <p>I tried changing this part of the code but no luck so far: </p>
  
  <pre><code>renderer.setSize(window.innerWidth, window.innerHeight);
  </code></pre>
  
  <p>Here is the code of the function.</p>
  
  <pre><code>//////////////settings/////////
  
  var movementSpeed = 30;
  var totalObjects = 500;
  var objectSize = 70;
  var sizeRandomness = 0;
  var color = 0x00BEE0;
  
  
  /////////////////////////////////
  var dirs = [];
  var parts = [];
  //var container = document.createElement('div');
  //document.body.appendChild( container );
  var container = document.getElementById('header');
  //document.body.appendChild( header );
  
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
  camera.position.z = 1000;
  
  var scene = new THREE.Scene();
  
  function ExplodeAnimation(x, y) {
      var geometry = new THREE.Geometry();
  
      for (i = 0; i &lt; totalObjects; i++) {
          var vertex = new THREE.Vector3();
          vertex.x = x;
          vertex.y = y;
          vertex.z = 0;
  
          geometry.vertices.push(vertex);
          dirs.push({
              x: (Math.random() * movementSpeed) - (movementSpeed / 2),
              y: (Math.random() * movementSpeed) - (movementSpeed / 2),
              z: (Math.random() * movementSpeed) - (movementSpeed / 2)
          });
      }
      var material = new THREE.ParticleBasicMaterial({
          size: objectSize,
          color: color
      });
      var particles = new THREE.ParticleSystem(geometry, material);
  
      this.object = particles;
      this.status = true;
  
      this.xDir = (Math.random() * movementSpeed) - (movementSpeed / 2);
      this.yDir = (Math.random() * movementSpeed) - (movementSpeed / 2);
      this.zDir = (Math.random() * movementSpeed) - (movementSpeed / 2);
  
      scene.add(this.object);
  
      this.update = function() {
          if (this.status == true) {
              var pCount = totalObjects;
              while (pCount--) {
                  var particle = this.object.geometry.vertices[pCount]
                  particle.y += dirs[pCount].y;
                  particle.x += dirs[pCount].x;
                  particle.z += dirs[pCount].z;
              }
              this.object.geometry.verticesNeedUpdate = true;
          }
      }
  
  }
  
  var renderer = new THREE.WebGLRenderer();
  
  
  
  
  function render() {
      requestAnimationFrame(render);
  
      var pCount = parts.length;
      while (pCount--) {
          parts[pCount].update();
      }
  
      renderer.render(scene, camera);
  
  }
  
  window.addEventListener('mousedown', onclick, false);
  window.addEventListener('resize', onWindowResize, false);
  
  function onClick() {
      event.preventDefault();
      parts.push(new ExplodeAnimation((Math.random() * sizeRandomness) - (sizeRandomness / 2), (Math.random() * sizeRandomness) - (sizeRandomness / 2)));
  }
  
  function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  
      renderer.setSize(window.innerWidth, window.innerHeight);
  }
  
  document.getElementById("btn-header-trigger").addEventListener('click',run);
  
  function run() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      container.appendChild(renderer.domElement);
      renderer.render(scene, camera);
      parts.push(new ExplodeAnimation(0, 0));
      render();
  }
  </code></pre>