Applying Vertex Transformations on Custom Geometry

by sirfizx

HTML

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

CSS

body {
    overflow: hidden;
    background-color: #ccccff;
}

JavaScript

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

init();
animate();

function init() {

    // CAMERA
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 300, 500);

    // SCENE
    scene = new THREE.Scene();
    camera.position.set(0, 0, 140);
    camera.lookAt(scene.position);

    // LIGHT
    light = new THREE.PointLight(0xffffff);
    light.position.set(0, 0, 1000);
    scene.add(light);

    //Custom Geometry
    var a = {
        x: 0,
        y: 0
    }
    var b = {
        x: 50,
        y: 50
    }

    var geometry = new THREE.Geometry();

    geometry.vertices.push(new THREE.Vector3(a.x, a.y, 2));
    geometry.vertices.push(new THREE.Vector3(b.x, a.y, 2));
    geometry.vertices.push(new THREE.Vector3(b.x, b.y, 2));
    geometry.vertices.push(new THREE.Vector3(a.x, b.y, 2));

    geometry.faces.push(new THREE.Face3(0, 1, 2)); // counter-clockwise winding order
    geometry.faces.push(new THREE.Face3(0, 2, 3));

    geometry.computeCentroids();
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    // Material
    material = new THREE.MeshPhongMaterial({
        ambient: 0x030303,
        color: 0xcc66aa,
        specular: 0x009900,
        shininess: 30,
        shading: THREE.FlatShading
    })
    material.side = THREE.DoubleSide;
    //material.side = THREE.FrontSide;

    // Mesh
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);


    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.y += 0.02;

    renderer.render(scene, camera);

}