Polygon CreationMain 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(); // 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(); |
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: |
Facebook comments: