Add text to an object(the white circle) in three.js

Question

Here is a JS Fiddle 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.

three.js 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 < 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 < 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 > 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);

}  

Thanks in advance.

Answer 1

Simple 3D text, i found it in an old file i had: you need the source too:

 <script src="http://mrdoob.github.com/three.js/examples/fonts/helvetiker_regular.typeface.js"></script>

 var MyWords = "Thomas Sebastian";
 var shape = new THREE.TextGeometry(MyWords, {font: 'helvetiker',size:'24',curveSegments: 20, weight: 'normal',height : 4,hover:30});
 var wrapper = new THREE.MeshPhongMaterial({color: 0x65676,ambient: 0x030303, specular: 0x009900, shininess: 30});
 var words = new THREE.Mesh(shape, wrapper);
 words.position.x=-80;
 words.position.z=0;
 words.position.y=20;
 scene.add(words);

The Result :)