A three.js Mesh is the combination of a Geometry (shape) and a Material (appearance) and nothing is drawn until both are combined

In three.js, the visible 3D object on screen is a Mesh — the combination of a Geometry object (vertex positions, face indices, UV coordinates, normals) and a Material object (colour, shininess, texture maps, light response) plus a position/orientation/scale. Neither geometry nor material is renderable alone. Multiple meshes can share the same geometry or material for memory efficiency. MeshBasicMaterial ignores all lights (always flat-lit); MeshPhongMaterial and MeshStandardMaterial respond to scene lights. Swapping material type is the fastest way to add or remove lighting response without changing any geometry data.

Examples

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({color: 0x44aa88});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Two cubes sharing one geometry but different materials use half the geometry memory of two distinct geometries.

Assessment

Create a scene with two cubes sharing one geometry but using different materials. Then explain why no light effect is visible when using MeshBasicMaterial.