title: three.js -- fit a background image panorama
body: <p>I am trying to put this image -- <a href="https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg" rel="nofollow">https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg</a> -- as a panorama background in my three.js scene.</p>
  
  <p>I have the following code:</p>
  
  <pre><code>var sphere = new THREE.SphereGeometry(200, 200, 32);
  sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
  
  var sphereMaterial = new THREE.MeshBasicMaterial();
  sphereMaterial.map = THREE.ImageUtils.loadTexture(&lt;path to above image&gt;);
  
  var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
  scene.add(sphereMesh);
  </code></pre>
  
  <p>However</p>
  
  <ol>
  <li><p>When i view through cardboard, and rotate 360 degrees, i do not see the background rotate 360 degrees (but less than that). How do i align?</p></li>
  <li><p>When i view on my laptop, i can rotate the image but it seems to underfit the screen dimensions</p></li>
  </ol>
  
  <p>Is there a guideline on how to perfectly fit a given background image as a three.js panorama?</p>