Data Structuresand Algorithms Good OldJava AdvancedInterview Topics Cloud andDatabases Web Designand Development Must-knowTools Good ToKnow

## Polygon Creation

Main part involved in polygon creation is the choice of vertices.
For a 2D polygon, this is somewhat simpler because faces need not be chosen.
For a 3D polygon, faces must also be explicitly specified.

Example:

Three.JS code used to draw the above figures.
```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();

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

camera = new THREE.PerspectiveCamera(45, ASPECT, 1, 10000);
// 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 } )
] );

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();
```

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

 Name: Email: (Your email is not shared with anybody) Comment: