WebGL (pt. 2) - Geometry

// 3D models (or meshes) are made up of vertices, edges and faces. // Vertices: the points of intersection between 3 edges. // Edges: an edge where two faces meet (think of the edges of a cube). // Faces: polygons (triangles) that make up the faces of the model. // https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/geometry.png // The code to create a cube // create some geometry - this is how you create some square // geometry using the BoxGeometry method var geometry = new THREE.BoxGeometry( 20, 20, 20); // create a material var material = new THREE.MeshNormalMaterial(); // add the geometry to the mesh - and apply the material to it var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); // on codepen -> http://codepen.io/rachsmith/pen/qbgBNo // position and rotate the mesh // rotate cube cube.rotation.x = 0.45; cube.rotation.y = -0.25; // shift cube on the x axis cube.position.x = -30; // on codepen -> http://codepen.io/rachsmith/pen/GozRMb // on codepen -> http://codepen.io/rachsmith/pen/Rrvwpv // Modifying geometry vertices // update cube vertices for (var i = 0, l = geometry.vertices.length; i<l; i++) { // we'll move the x & y position of each vertice by a random amount geometry.vertices[i].x += -10 + Math.random()*20; geometry.vertices[i].y += -10 + Math.random()*20; } // on codepen -> http://codepen.io/rachsmith/pen/adXbqG // examples // http://codepen.io/Yakudoo/pen/LVyJXw // http://codepen.io/aglosson/pen/rVyRGm