title: Mapping a stereographic projection to the inside of a sphere in ThreeJS
body: <p>When it comes to 3D animation, there are a <strong><em>lot</em></strong> of terms and concepts that I'm not familiar with (maybe a secondary question to append to this one: what are some good books to get familiar with the concepts?). I don't know what a "UV" is (in the context of 3D rendering) and I'm not familiar with what tools exist for mapping pixels on an image to points on a mesh.</p>
  
  <p>I have the following image being produced by a 360-degree camera (it's actually the output of an HTML <code>video</code> element):</p>
  
  <p><a href="https://i.stack.imgur.com/5pQ2C.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5pQ2C.png" alt="360-degree Panorama"></a></p>
  
  <p>I want the center of this image to be the "top" of the sphere, and any radius of the circle in this image to be an arc along the sphere from top to bottom.</p>
  
  <p>Here's my starting point (copying lines of code directly from the Three.JS documentation):</p>
  
  <pre><code>var video = document.getElementById( "texture-video" );
  
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
  
  var texture = new THREE.VideoTexture( video );
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;
  
  var material = new THREE.MeshBasicMaterial( { map: texture } );
  
  var geometry = new THREE.SphereGeometry(0.5, 100, 100);
  var mesh = new THREE.Mesh( geometry, material );
  
  scene.add( mesh );
  
  camera.position.z = 1
  
  function animate()
  {
      mesh.rotation.y += 0.01;
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
  }
  animate();
  </code></pre>
  
  <p>This produces the following:</p>
  
  <p><a href="https://i.stack.imgur.com/Ny1nT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ny1nT.png" alt="Mapped to a sphere"></a></p>
  
  <p>There are a few problems:</p>
  
  <ul>
  <li><strike>The texture is rotated 90 degrees</strike></li>
  <li><strike>The ground is distorted, although this may be fixed if the rotation is fixed?</strike></li>
  <li><strong>Update:</strong> Upon further investigation of the sphere being produced, it's not actually rotated 90 degrees. Instead, the top of the image is the top of the sphere and the bottom of the image is the bottom of the sphere. This causes the left and right edges of the image to become the distorted "sideways ground" I saw</li>
  <li>This is on the <strong>outside</strong> of the sphere. I want to project this to the <strong>inside</strong> of the sphere (and place the camera inside the sphere)</li>
  </ul>
  
  <p>Currently if I place the camera inside the sphere I get solid black. I don't think it's a lighting issue because the Three.JS docs said that a <code>MeshBasicMaterial</code> didn't need lighting. I think the issue may be that the normals of all of the sphere faces point outward and I need to reverse them. I'm not sure how one would do this - but I'm pretty sure it's possible since I think this is how skyboxes work.</p>
  
  <p>Doing some research I'm pretty sure I need to modify the "UV"s to fix this, I just don't know how or really what that even means...</p>