(click anywhere to close)

[Three.js] Material Madness!

category: Games | course: Threejs | difficulty:

Three.js comes with a few basic materials that will, most of the time, fit your needs. But if you need special shaders, you can write them yourself in GLSL ((Web)GL Shader Language), and hand those to the engine.


This material shades geometries in a flat or wireframe way. With this material, you can basically give a 3D object a certain color, and it will just be that color, nothing more (no shadows/reflection/gradient/whatever). And if you set the wireFrame property to true, it will render the wireframe of the object instead (which is typically used for debugging).

var material = new THREE.MeshBasicMaterial( parameters )

//Parameters is an object which can have a lot of properties, but you'll probably only need:
//color: the color of the material
//wireframe: set to true if you want to display the wireframe of the geometry


Unlike the basic one, this material is capable of shading an object based on light sources and shadows.

var material = new THREE.MeshLambertMaterial( parameters )


The phong material is especially useful for shiny surfaces.

var material = new THREE.MeshPhongMaterial( parameters )

//This material has one special property to set in the parameters object:
//shininess: a number, default is 30


This takes an array of materials, and puts each on a single, seperate face!

var materials = //some array containing all sorts of materials...
var cubeMaterial = new THREE.MeshFaceMaterial(materials);

Common properties among materials

Despite the fact that every material does something else completely, there are lots of common properties among the materials (they all inherit from the parent Material class). Among them are:

//We've already covered color and wireframe!

//Ambient color of the material, multiplied by the color of the AmbientLight. Default is white.


//Specular color of the material, i.e., how shiny the material is and the color of its shine. Setting this the same color as the diffuse value (times some intensity) makes the material more metallic-looking; setting this to some gray makes the material look more plastic. Default is dark gray.


//How the triangles of a curved surface are rendered: as a smooth surface, as flat separate facets, or no shading at all.
//Options are THREE.SmoothShading (default), THREE.FlatShading, THREE.NoShading.


//Define whether the material color is affected by global fog settings. Default is true.


//How much the environment map affects the surface; also see "combine".


/.The index of refraction for an environment map using THREE.CubeRefractionMapping. Default is 0.98.


//How to combine the result of the surface's color with the environment map, if any.
//Options are THREE.MultiplyOperation (default), THREE.MixOperation, THREE.AddOperation. If mix is chosen, the reflectivity is used to blend between the two colors.

//Bump maps can be generated from textures, and when included with the original one, gives a flat 2D texture a very realistic 3D look without having to model the 3D object to it.

If you want anything regarding transparency for your object, you need to remember to set two things:

//Set the transparent flag to true
someMaterial.transparent = true;

//A value between 0.0 and 1.0 for opacity (= alpha= transparency)
someMaterial.opacity = someValue;

Is that all we can do?

No, that's not all. You can write your own shaders/materials in any way you like! However, for this you need to learn a new programming language;GLSL. This will be discussed later in this course.

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk