title: Set Three.js Background from user upload
body: <p>I want a user to be able to upload an image from his own computer, which should be set as a background image for Three.js. This image should be a static background. Is it possible to save the image just in a variable?
  My current code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;See your new car where you want it&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="main.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="file" onchange="selectBackground()" multiple accept='image/*'&gt;&lt;br&gt;
      &lt;script src="js/three.js"&gt;&lt;/script&gt;
      &lt;script src="js/OrbitControls.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var scene;
          var camera;
          var renderer; 
          function selectBackground()
          {
              console.log("getting image");
              var newBackground;
              function previewFile() {
              var preview = document.querySelector('img');
              var file    = document.querySelector('input[type=file]').files[0];
              var reader  = new FileReader();
  
              reader.addEventListener("load", function () {
              newBackground = reader.result;
              }, false);
              if (file) {
                reader.readAsDataURL(file);
              }
              
              }
              setBackground(newBackground);  
          }
          
          function setBackground(image)
          {
              console.log("setting background");
             //init of three.js 
             //init Three.js
              scene = new THREE.Scene();
              camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
              camera.position.set( 400, 200, 0 );
              //set background color to white
              //scene.background = new THREE.Color(0xffffff);
             //set background
              scene.backgroundImage = new THREE.CanvasTexture(image);
  
              renderer = new THREE.WebGLRenderer();
              renderer = new THREE.WebGLRenderer( { antialias: true } );
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              document.body.appendChild( renderer.domElement );
              document.body.appendChild( renderer.domElement );
              controls = new THREE.OrbitControls( camera, renderer.domElement );
  
              var geometry = new THREE.BoxGeometry( 1, 1, 1 );
     var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
     var cube = new THREE.Mesh( geometry, material );
     scene.add( cube );
  
     camera.position.z = 2;
              animate();
          }
          var animate = function () {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
     };
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It would be awesome if you would be able to help me with this.</p>