Light and Material

What this page does

Four knots turn side by side. They are the same shape and they are painted the same colour. They do not look alike at all. Click Turn the lamp off. Two of them go black. Two do not notice.

The four

Basic and Wireframe are unlit materials. They take no part in lighting at all. That makes MeshBasicMaterial exactly right for a sun, a sky, or an outline you are using to debug something, and exactly wrong for anything meant to look solid.

Roughness

new THREE.MeshStandardMaterial({ color: PAINT, roughness: 1 })
new THREE.MeshStandardMaterial({ color: PAINT, roughness: 1 - POLISH })

Roughness runs from 0 to 1. At 1 the surface scatters light in every direction and there is no highlight anywhere. Near 0 it reflects the lamp in one small bright spot, which slides around as the knot turns. That sliding highlight is most of what makes something look solid rather than painted.

Two lights, two different jobs

Ambient light cannot make a highlight and it cannot make a shadow, because it has no direction to come from. Its only job is to stop the dark side of things being pure black. Real rooms have light bouncing off the walls, and ambient light is a cheap stand-in for that.

Set the ambient intensity to 0 and the shadowed sides go black. Set it to 3 and everything goes flat and the shape disappears. Both extremes are wrong, and looking at both is the fastest way to understand what it is for.

A trap worth knowing about

This page uses polish instead, which needs nothing extra. It is worth knowing the metal trap exists, because you will reach for it and it will look broken when it is not.

Why a knot, and why one geometry

A ball looks identical however you turn it, so nothing about the light would ever appear to move. Any shape used to show off a material needs curves facing different ways.

var knot = new THREE.TorusKnotGeometry(0.55, 0.2, 128, 24);

for (var i = 0; i < materials.length; i++) {
    var mesh = new THREE.Mesh(materials[i].geometry || knot, materials[i].material);
    mesh.position.x = i * 1.8 - 2.7;
    scene.add(mesh);
}

One geometry is shared by three of the four meshes. Geometry is the expensive part, and there is no reason to build the same knot three times. The wireframe brings its own much simpler knot, because at this level of detail a wireframe is a solid mess of lines.