title: Add text to an object(the white circle) in three.js
body: <p>Here is a <a href="http://jsfiddle.net/1u8n2zgn/" rel="nofollow">JS Fiddle</a> which shows what I have at the moment. I would like to add a text 3D/2D doesn't matter. The text should rotate along with the rotation of the white circle. Any method is preferred as long as the intended result is obtained. Here is the code.  </p>
  
  <p><strong>three.js code</strong>  </p>
  
  <pre><code>var SCREEN_WIDTH = window.innerWidth,
      SCREEN_HEIGHT = window.innerHeight,
  
      mouseX = 0,
      mouseY = 0,
  
      windowHalfX = window.innerWidth / 2,
      windowHalfY = window.innerHeight / 2,
  
      SEPARATION = 200,
      AMOUNTX = 100,
      AMOUNTY = 10,
  
      camera, scene, renderer;
  
  init();
  animate();
  
  function init() {
  
      var container, separation = 100,
          amountX = 50,
          amountY = 50,
          particles, particle;
  
      container = document.createElement('div');
      document.body.appendChild(container);
  
      camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
      camera.position.y = 5800;
      camera.position.z = 1000;
  
      scene = new THREE.Scene();
  
      renderer = new THREE.CanvasRenderer({
          alpha: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
  
      renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
      container.appendChild(renderer.domElement);
  
      // particles
  
      var PI2 = Math.PI * 2;
      var material = new THREE.SpriteCanvasMaterial({
  
          color: 0xffffff,
          program: function (context) {
  
              context.beginPath();
              context.arc(0, 0, 9.5, 0, PI2, true);
              context.fill();
  
          }
  
      });
      for (var i = 0; i &lt; 1000; i++) {
  
          particle = new THREE.Sprite(material);
          particle.position.x = Math.random() * 2 - 1;
          particle.position.y = Math.random() * 2 - 1;
          particle.position.z = Math.random() * 2 - 1;
  
          particle.position.normalize();
          particle.position.multiplyScalar(Math.random() * 10 + 450);
          particle.scale.multiplyScalar(10);
          scene.add(particle);
  
      }
  
      // lines
  
      for (var i = 0; i &lt; 300; i++) {
  
          var geometry = new THREE.Geometry();
  
          var vertex = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
          vertex.normalize();
          vertex.multiplyScalar(1850);
  
          geometry.vertices.push(vertex);
  
          var vertex2 = vertex.clone();
          vertex2.multiplyScalar(Math.random() * 0.3 + 1);
  
          geometry.vertices.push(vertex2);
  
          var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({
              color: 0xffffff,
              opacity: Math.random()
          }));
          scene.add(line);
      }
  
      document.addEventListener('mousemove', onDocumentMouseMove, false);
      document.addEventListener('touchstart', onDocumentTouchStart, false);
      document.addEventListener('touchmove', onDocumentTouchMove, false);
  
      //
  
      window.addEventListener('resize', onWindowResize, false);
  
  }
  
  function onWindowResize() {
  
      windowHalfX = window.innerWidth / 2;
      windowHalfY = window.innerHeight / 2;
  
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  
      renderer.setSize(window.innerWidth, window.innerHeight);
  
  }
  
  //
  
  function onDocumentMouseMove(event) {
  
      mouseX = event.clientX - windowHalfX;
      mouseY = event.clientY - windowHalfY;
  }
  
  function onDocumentTouchStart(event) {
  
      if (event.touches.length &gt; 1) {
  
          event.preventDefault();
  
          mouseX = event.touches[0].pageX - windowHalfX;
          mouseY = event.touches[0].pageY - windowHalfY;
  
      }
  
  }
  
  function onDocumentTouchMove(event) {
  
      if (event.touches.length == 1) {
  
          event.preventDefault();
  
          mouseX = event.touches[0].pageX - windowHalfX;
          mouseY = event.touches[0].pageY - windowHalfY;
  
      }
  
  }
  
  //
  
  function animate() {
  
      requestAnimationFrame(animate);
  
      render();
  
  }
  
  function render() {
  
      camera.position.x += (mouseX - camera.position.x) * .05;
      camera.position.y += (-mouseY + 200 - camera.position.y) * .05;
  
      camera.lookAt(scene.position);
  
      renderer.render(scene, camera);
  
  }  
  </code></pre>
  
  <p>Thanks in advance.</p>