Polygon Creation

var WIDTH = window.innerWidth *0.4;
var HEIGHT = window.innerHeight *0.7;
var ASPECT = WIDTH / HEIGHT;

var scene, camera, renderer;
var polygons = [];

function init()
{
    // create a WebGL renderer inside an existing dom element (id=main)
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xAAAAAA));
    renderer.setSize(WIDTH, HEIGHT);
    
    document.getElementById("main").appendChild( renderer.domElement );

    scene = new THREE.Scene();

    // Add light
    var pointLight = new THREE.PointLight(0xFFFFFF);
    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 130;

    scene.add(pointLight);


    // Add camera
    camera = new THREE.PerspectiveCamera(45, ASPECT, 1, 10000);
    scene.add(camera);
    // the camera starts at 0,0,0, so pull it back
    camera.position.z = 30;

    // Main part of the code
    var polygon = createHutParts();
    polygons.push (polygon);

    polygon = createHutParts();
    polygon.position.x = -10;
    polygons.push (polygon);

    polygon = createHutParts();
    polygon.position.x = -10;
    polygon.position.y = -10;
    polygons.push (polygon);

    polygon = createHutParts();
    polygon.position.y = -10;
    polygons.push (polygon);
    
    for (var i=0; i<polygons.length; i++)
    {
        polygons[i].scale.x = 0.65;
        polygons[i].scale.y = 0.65;
    }


    renderer.render(scene, camera);
    animate();

}

function createHutParts()
{
    var shapes = [];

    var pts = [];

    // Create a hut shape by specifying each point on hut
    pts.push(new THREE.Vector2(0, 0));
    pts.push(new THREE.Vector2(0, 5));
    pts.push(new THREE.Vector2(-0.5, 4.5));
    pts.push(new THREE.Vector2(-1.5, 4.5));
    pts.push(new THREE.Vector2(3, 9));
    pts.push(new THREE.Vector2(7.5, 4.5));
    pts.push(new THREE.Vector2(6.5, 4.5));
    pts.push(new THREE.Vector2(6, 5));
    pts.push(new THREE.Vector2(6, 0));
    pts.push(new THREE.Vector2(0, 0));

    var front = new THREE.Shape(pts);

    // define a hole (It must be anti-clockwise if shape is clockwise and vice-versa)
    pts = [];
    pts.push(new THREE.Vector2(2, 0.5));
    pts.push(new THREE.Vector2(4, 0.5));
    pts.push(new THREE.Vector2(4, 4));
    pts.push(new THREE.Vector2(2, 4));
    pts.push(new THREE.Vector2(2, 0.5));

    front.holes.push(new THREE.Shape(pts));
    shapes.push (front);


    // Create hut hull
    pts = [];
    pts.push(new THREE.Vector2(3, 9));
    pts.push(new THREE.Vector2(9, 9));
    pts.push(new THREE.Vector2(12.5, 4.5));
    pts.push(new THREE.Vector2(7.5, 4.5));

    var hull = new THREE.Shape(pts);
    shapes.push (hull);


    // Create hut body
    pts = [];
    pts.push(new THREE.Vector2(11.5, 4.5));
    pts.push(new THREE.Vector2(11.5, 1));
    pts.push(new THREE.Vector2(6, 0));
    pts.push(new THREE.Vector2(6, 4.5));

    var hbody = new THREE.Shape(pts);

    // Hole for right window
    pts = [];
    pts.push(new THREE.Vector2(9.5, 3.8));
    pts.push(new THREE.Vector2(9.5, 2.5));
    pts.push(new THREE.Vector2(10.7, 2.6));
    pts.push(new THREE.Vector2(10.7, 3.7));
    pts.push(new THREE.Vector2(9.5, 3.8));

    hbody.holes.push(new THREE.Shape(pts));

    // Holes for left window
    pts = [];
    pts.push(new THREE.Vector2(7, 4));
    pts.push(new THREE.Vector2(7, 2.3));
    pts.push(new THREE.Vector2(8.5, 2.4));
    pts.push(new THREE.Vector2(8.5, 3.9));
    pts.push(new THREE.Vector2(7, 4));

    hbody.holes.push(new THREE.Shape(pts));

    shapes.push (hbody);


    // Amount parameter is the thickness.
    var geom = new THREE.ExtrudeGeometry(shapes, { amount: 0.2, bevelEnabled: false });

    // create a polygon mesh with two kind of materials
    var polygon = THREE.SceneUtils.createMultiMaterialObject( 
            geom, 
            [ 
            new THREE.MeshLambertMaterial( { color: 0xAA5555 } ), 
            new THREE.MeshBasicMaterial( { color: 0x775555, wireframe: true, transparent: true } ) 
            ] );

    scene.add( polygon );
    return polygon;
}


function animate()
{
    requestAnimationFrame( animate );

    for (var i=0; i<polygons.length; i++)
    {
        var polygon = polygons[i];
        polygon.rotation.x += 0.003*i;
        polygon.rotation.y += 0.003*i;
    }

    renderer.render(scene, camera);
}

init();