WebGL (pt. 3) - Materials

// MeshNormalMaterial // The mesh normal material is not the most useful material because you have very little control over how the material appears. var material = new THREE.MeshNormalMaterial(); // on codepen -> http://codepen.io/rachsmith/pen/OMKEvV // AN ASIDE: WORKING WITH COLORS WITHIN THREE.JS // use hex string var color = new THREE.Color("#6f4171"); // use rgba string var color = new THREE.Color("rgba(188, 141, 190, 1)"); // get hex value of color var hex = color.getHex() // more here http://threejs.org/docs/#Reference/Math/Color // MeshLambertMaterial // The mesh lambert material is described as a non-shiny material, so I like to think of it is a matte-finish material. Like a matte plastic. // Creating a MeshLambertMaterial with a flat color var color = new THREE.Color( "#7833aa" ); var material = new THREE.MeshLambertMaterial( {color: color.getHex()} ); // on codepen -> http://codepen.io/rachsmith/pen/EKYyeB // with more lighting -> http://codepen.io/rachsmith/pen/bpbePv // Wireframes // Using wireframes Within these materials there is an option to use a wireframe instead of filling all the planes - which is a pretty cool effect in itself. To do this, you just set the wireframe option to true. var material = new THREE.MeshLambertMaterial( {color: color.getHex(), wireframe: true} ); // on codepen -> http://codepen.io/rachsmith/pen/vGBWog // Creating a MeshLambertMaterial with a texture (image) // create a loader to get an image from a URL var textureLoader = new THREE.TextureLoader(); // we've gotta set this to use cross-origin images textureLoader.crossOrigin = true; // load in the image textureLoader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/chrispizza.png', function(texture) { // this code makes the texture repeat texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 2 ); // set the texture as the map for the material var material = new THREE.MeshLambertMaterial( {map: texture} ); }) // on codepen -> http://codepen.io/rachsmith/pen/GZKjqO // MeshPhongMaterial var color = new THREE.Color( "#7833aa" ); var material = new THREE.MeshPhongMaterial( {color: color.getHex()} ); // on codepen -> http://codepen.io/rachsmith/pen/ONLRQo // modify shine var color = new THREE.Color( "#7833aa" ); var material = new THREE.MeshPhongMaterial( {color: color.getHex(), specular: 0x009900, shinyness: 20 } ); // on codepen -> http://codepen.io/rachsmith/pen/aNomGB // Bump map // A bump map is a black and white map that creates perceived depth in your object when it is in lighting. This way you can create ridges and bumps in your mesh without having to complicate the geometry. var textureLoader = new THREE.TextureLoader(); textureLoader.crossOrigin = true; textureLoader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/4268-bump.jpg', function(texture) { // apply the texture as a bump map var material = new THREE.MeshPhongMaterial( {color: color.getHex(), bumpMap: texture} ); }); // on codepen -> http://codepen.io/rachsmith/pen/WweGKW