ThreeJS Lesson 2

HTML

<script src="http://andrewray.me/threejs-examples/font-example/js/janda_manatee_solid_regular.typeface.js"></script>

CSS

body {
    overflow: hidden;
    background-color: #228f22;
}

JavaScript

var camera, scene, renderer, light;
var geometry, material, mesh, my3DText;

init();
animate();

function init() {
    
    // CAMERA
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0,300,1000);
    
    // SCENE
    scene = new THREE.Scene();
    camera.lookAt(scene.position);
    
    // LIGHT
    light = new THREE.PointLight(0xffffff);
    light.position.set(0,0,1000);
    scene.add(light);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000,
        wireframe: true
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.y = Math.PI/6;
    scene.add(mesh);
    
    //Instantiate a pseudo class object from the pseudo class Text3D 
    my3DText = new Text3D('Check !', -250, 150, -20, '#ccddff');
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    //mesh.rotation.x += 0.01;
    //mesh.rotation.y += 0.02;
    my3DText.object.position.z+=5;
    camera.lookAt(my3DText.object.position);
    
    renderer.render(scene, camera);

}

/*
Put Pseudo-CLASSES below here.
*/

/*
Build on the ThreeJS TextGeometry to make a convenient
3D Text object
*/
// Define the class like this
  function Text3D(text,posx,posy,posz,hexcolor){

      // Add object properties like this
      // add 3D text beveled and sized
      var material2 = new THREE.MeshPhongMaterial({
          color: hexcolor
      });
      var textGeom2 = new THREE.TextGeometry(text, {
          size: 60, height: 20, curveSegments: 3,
          font: 'janda manatee solid', weight: 'normal',
          bevelThickness: 3, bevelSize: 3, bevelEnabled: true
      });
      this.object = new THREE.Mesh( textGeom2, material2 );

     ...