How to Use Materials in Three.js Designing 3D Content for the Web
To define the appearance and lighting effects of 3D objects in Three.js,
choosing the right material is essential.
In this article, we clearly explain the features and usage of representative materials available in Three.js,
such as MeshBasicMaterial, MeshStandardMaterial, and MeshToonMaterial,
with implementation code examples.
Recommended for those who are unsure which material to use or want to understand the differences in gloss and shadow rendering.
Six Types of Materials in Three.js (using Three.js[r145])
Left mouse drag rotates, right mouse drag moves, and the wheel zooms in/out.From left to right: MeshBasicMaterial, MeshNormalMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshToonMaterial, MeshStandardMaterial
THREE.MeshBasicMaterial (first from the left)
Basic material (flat color material not affected by lights)
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Basic material (flat color material not affected by lights)
let mat1=new THREE.MeshBasicMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
// Create mesh from geometry and material
let mesh1=new THREE.Mesh(sphereGeo,mat1);
mesh1.receiveShadow=true; // allow this mesh to receive shadows
mesh1.castShadow=true; // allow this mesh to cast shadows
// Set mesh position (x→, y↑, z forward)
mesh1.position.set(-125,0,0);
// Add mesh to the scene
scene.add(mesh1);
THREE.MeshNormalMaterial (second from the left)
Normal material (ignores color setting, not affected by lights, represents depth with RGB)
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Normal material (ignores color, not affected by lights, represents depth with RGB)
let mat2=new THREE.MeshNormalMaterial({side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
// Create mesh from geometry and material
let mesh2=new THREE.Mesh(sphereGeo,mat2);
mesh2.receiveShadow=true; // allow this mesh to receive shadows
mesh2.castShadow=true; // allow this mesh to cast shadows
// Set mesh position (x→, y↑, z forward)
mesh2.position.set(-75,0,0);
// Add mesh to the scene
scene.add(mesh2);
THREE.MeshLambertMaterial (third from the left)
Lambert material (non-glossy material affected by lights)
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Lambert material (non-glossy material affected by lights)
let mat3=new THREE.MeshLambertMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
// Create mesh from geometry and material
let mesh3=new THREE.Mesh(sphereGeo,mat3);
mesh3.receiveShadow=true; // allow this mesh to receive shadows
mesh3.castShadow=true; // allow this mesh to cast shadows
// Set mesh position (x→, y↑, z forward)
mesh3.position.set(-25,0,0);
// Add mesh to the scene
scene.add(mesh3);
THREE.MeshPhongMaterial (fourth from the left)
Phong material (glossy material affected by lights)
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Phong material (glossy material affected by lights)
let mat4=new THREE.MeshPhongMaterial({color:0x6699FF, specular: 0x885555, shininess: 10, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
// Create mesh from geometry and material
let mesh4=new THREE.Mesh(sphereGeo,mat4);
mesh4.receiveShadow=true; // allow this mesh to receive shadows
mesh4.castShadow=true; // allow this mesh to cast shadows
// Set mesh position (x→, y↑, z forward)
mesh4.position.set(25,0,0);
// Add mesh to the scene
scene.add(mesh4);
THREE.MeshToonMaterial (fifth from the left)
Toon material (cartoon/anime-style shading)
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Toon material (cartoon/anime-style shading)
let mat5=new THREE.MeshToonMaterial({color:0x6699FF, side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1});
// Create mesh from geometry and material
let mesh5=new THREE.Mesh(sphereGeo,mat5);
// Set mesh position (x→, y↑, z forward)
mesh5.position.set(75,0,0);
mesh5.receiveShadow=true; // allow this mesh to receive shadows
mesh5.castShadow=true; // allow this mesh to cast shadows
// Add mesh to the scene
scene.add(mesh5);
THREE.MeshStandardMaterial (sixth from the left)
Standard physically-based material
// Create SphereGeometry (radius[1], width segments[32], height segments[16], phiStart[0], phiLength[Math.PI*2])
let sphereGeo=new THREE.SphereGeometry(20,32,16,0,Math.PI*2);
// Create Standard physically-based material
// (metalness[0.0: non-metal → rusty metal → 1.0: metal], roughness[0.0: perfect mirror → 1.0: fully diffuse], emissive[color of emitted light], emissiveIntensity[intensity of emitted light])
let mat6=new THREE.MeshStandardMaterial({
color:0x6699FF, metalness:0.8, roughness:0.8, flatShading:false,
emissive:0x6699FF ,emissiveIntensity:0.5,
side:THREE.FrontSide, wireframe:false, wireframeLinewidth:1
});
// Create mesh from geometry and material
let mesh6=new THREE.Mesh(sphereGeo,mat6);
// Set mesh position (x→, y↑, z forward)
mesh6.position.set(125,0,0);
mesh6.receiveShadow=true; // allow this mesh to receive shadows
mesh6.castShadow=true; // allow this mesh to cast shadows
// Add mesh to the scene
scene.add(mesh6);