title: Three.JS UV Mapping for partial spheres
body: <p>In <a href="https://stackoverflow.com/questions/49900677/mapping-a-stereographic-projection-to-the-inside-of-a-sphere-in-threejs/">a previous question</a> I was looking to map a stereographic projection onto a sphere for the sake of live-streaming a virtual reality event.</p>
  
  <p>I ultimately learned quite a bit about UV mapping and was able to construct a very accurate mapping that looks incredible. However there's one thing I don't like about this mapping method: there's a hack where the bottom of the sphere has to map to "nothing", so I map it to a corner of the texture.</p>
  
  <p>In an effort to improve upon this solution, I tried creating only a partial sphere by adjusting the theta length per the <a href="https://threejs.org/docs/#api/geometries/SphereGeometry" rel="noreferrer">Three.JS documentation on SphereGeometry</a>.</p>
  
  <p>While I got the shape of the sphere right, I noticed something odd about the UV mapping:</p>
  
  <pre><code>var fov = 270;
  var geometry = new THREE.SphereGeometry(
      1, // Radius
      50, // Horizontal segments
      50, // Vertical segments
      0, // Phi start
      2 * Math.PI, // Phi length
      Math.acos((360 - fov) * Math.PI / 180 / 2), // Theta start
      Math.PI - Math.acos((360 - fov) * Math.PI / 180 / 2) // Theta length
  );
  var minX, minY, minZ, maxX, maxY, maxZ;
  var faceVertexUvs = geometry.faceVertexUvs[0];
  for ( var i = 0; i &lt; faceVertexUvs.length; i++ ) {
      var face = geometry.faces[i];
      for ( var j = 0; j &lt; 3; j ++ ) {
          var x = face.vertexNormals[j].x;
          var y = face.vertexNormals[j].y;
          var z = face.vertexNormals[j].z;
  
          // Capture the upper and lower bounds for all points
          if (!minX || x &lt; minX) minX = x;
          if (!maxX || x &gt; maxX) maxX = x;
          if (!minY || y &lt; minY) minY = y;
          if (!maxY || y &gt; maxX) maxY = y;
          if (!minZ || z &lt; minZ) minZ = z;
          if (!maxZ || z &gt; maxZ) maxZ = z;
      }
  }
  console.log("minX: " + minX + ", maxX: " + maxX);
  console.log("minY: " + minY + ", maxY: " + maxY);
  console.log("minZ: " + minZ + ", maxZ: " + maxZ);
  </code></pre>
  
  <p>I learned previously when performing UV mapping that the <code>x</code>, <code>y</code>, and <code>z</code> values range from <code>-1</code> to <code>1</code> - regardless of the actual size of the mesh. If the sphere had a radius of 1 or a radius of 100, an <code>x</code> value of 1 means "the far right of the sphere" and a <code>y</code> value of 1 means "the top of the sphere". However when I have an incomplete sphere like this (using <code>thetaStart</code> and <code>thetaLength</code> to cut a hole in the top of the sphere) suddenly <code>maxY</code> was equal to about 0.7854.</p>
  
  <p>Why is it that this mesh ends at 0.7854 instead of scaling from -1 to 1? I had hoped that by changing the shape of the sphere I could simplify my UV mapping logic (removing the <code>scaledY</code> term from my previous question that I linked) however altering the shape of the sphere seems to have had <strong>no</strong> affect on the UV map.</p>
  
  <p>Is there a way to tell Three.JS that this partial sphere is the full shape and its coordinates should range from -1 to 1?</p>