CreatingText.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
        <meta name="description" content="CS4406 Computer Graphics - Exercise #3" />
              <meta charset="utf-8" />
            <title>Sample Three.js</title>
            <style>
                #container {
                    background: #000000;
                    width: 100%;
                    height: 100%;
                        }
                #info{
                    position: absolute;
                    top: 10px;
                    width: 100%;
                    text-align: center;
                    z-index: 100;
                    display: block;
                }
          </style>
        <meta charset=utf-8 />
        <title>CS4406 Computer Graphics - Exercise #3</title>
          
        <style id="jsbin-css">
        
        </style>
        </head>
        <body>
        <div id="container"></div>
        <div id="info">description</div>
        </body>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
            <script src="http://uopeopleweb.com/js/dat.gui.min.js"></script>
            <script src="https://threejs.org/build/three.js"></script>
                <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
            <script src="http://uopeopleweb.com/js/math.js"></script>
            <script src="http://uopeopleweb.com/js/Detector.js"></script>
            <script type="text/javascript">


                // Creating Scene 
                var scene=new THREE.Scene();
                var camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,1000);
                camera.position.set(0,0,10);
                camera.lookAt(0,0,0);

                var renderer=new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth,window.innerHeight);
                document.body.appendChild(renderer.domElement);

                // Creating the text object
                var loader = new THREE.FontLoader();
                loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
                    var textGeo = new THREE.TextGeometry( "My Text", { 
                        font: font,
                        size: 200,
                        height: 50,
                        curveSegments: 12,
                        bevelThickness: 2,
                        bevelSize: 5,
                        bevelEnabled: true
                    } );
                    var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
                    var mesh = new THREE.Mesh( textGeo, textMaterial );
                    mesh.position.set( x, y, z );
                    scene.add( mesh )
                } );
                renderer.render(scene,camera);

</script>
</html>