title: Three JS, WebGl, display sprite on top of panorama
body: <p>I'm building a simple panorama webapp, where a user will be able to turn in circles and click on sprites in the loaded panorama. I have this working in CSS3D using three.js, now I need to get it to work in WebGL. I've loaded the panorama, and a sprite must be getting added to the scene since there are no errors, but I can't see the sprite. </p>
  
  <p>How do I make it visible?</p>
  
  <p>Here's the relevant code (omitting all the standard event functions and the rendering loop):</p>
  
  <pre><code>function init() {
  
      var container, mesh;
  
      container = document.getElementById('container');
  
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
      camera.target = new THREE.Vector3(0, 0, 0);
  
      scene = new THREE.Scene();
  
      var sides = [
          {
              url: '/assets/posx.jpg'
          },
          {
              url: '/assets/negx.jpg'
          },
          {
              url: '/assets/posy.jpg'
          },
          {
              url: '/assets/negy.jpg'
          },
          {
              url: '/assets/posz.jpg'
          },
          {
              url: '/assets/negz.jpg'
          }
      ];
  
      var k = 8
      for (var i = 0; i &lt; sides.length; i++) {
  
          var side = sides[ i ];
          var geometry = new THREE.SphereGeometry(5, k, k);
          k += 8;
          geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
  
          var material = new THREE.MeshBasicMaterial({
              map: THREE.ImageUtils.loadTexture(side.url)
          });
          mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
  
      }
  
      var map = THREE.ImageUtils.loadTexture("/assets/soap.png");
      material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, fog: false });
      var sprite = new THREE.Sprite(material);
  
      sprite.position.x = 128;
      sprite.position.y = 128;
      sprite.position.z = 128;
  
      scene.add(sprite);
  
  
      renderer = new THREE.WebGLRenderer();
  
  
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      document.addEventListener('mousedown', onDocumentMouseDown, false);
      document.addEventListener('mousewheel', onDocumentMouseWheel, false);
  
      document.addEventListener('touchstart', onDocumentTouchStart, false);
      document.addEventListener('touchmove', onDocumentTouchMove, false);
  
      window.addEventListener('resize', onWindowResize, false);
  
  }
  </code></pre>
  
  <p>Any help appreciated!</p>