Materials and Colors

Materials

Materials define the appearance of a geometry — its color, shininess, transparency, and how it reacts to light.

Core Materials

MeshBasicMaterial — flat, unaffected by lights. Always fully bright.

new THREE.MeshBasicMaterial({ color: 0xff4400 })

MeshNormalMaterial — maps surface normals to colors (RGB = XYZ). No lighting needed. Great for debugging.

new THREE.MeshNormalMaterial()

MeshStandardMaterial — physically-based rendering (PBR). Reacts to lights. Use roughness and metalness for realism.

new THREE.MeshStandardMaterial({ color: 0x2244ff, roughness: 0.4, metalness: 0.8 })

MeshPhongMaterial — older shading model with shininess. Lighter than Standard.

new THREE.MeshPhongMaterial({ color: 0x00ff88, shininess: 100 })

Colors

Three.js Color can be set with:

• Hex number: 0xff4400 (R=255, G=68, B=0)
• Hex string: "#ff4400"
• Color name: "tomato"
• RGB components: new THREE.Color(1, 0.5, 0)

const mat = new THREE.MeshStandardMaterial({ color: 0xff6347 });
console.log(mat.color.getHexString()); // "ff6347"
console.log(mat.color.r.toFixed(2));   // "1.00"

Wireframe

Any material can render as wireframe (edges only):

new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })

Your Task

Implement createMaterial(hex, roughness, metalness) that returns a MeshStandardMaterial with the given parameters.