Navigate

Search topics across all sections

GitHub
Materials

Standard & Physical Materials

These are the materials that make your 3D objects look like real-world surfaces. With just two sliders — roughness and metalness — you can recreate everything from rubber tires to polished chrome.

You create a beautiful gold sphere with metalness set to 1 and roughness to 0. But when you run the scene, it is completely black. You change the color to bright yellow — still black. The problem? There is no environment map, and metals can only show color by reflecting their surroundings.

terminal
Metallic PBR mesh renders as solid black despite having a color set.

Real-world

Imagine you are standing in a hardware store, running your fingers across different surfaces.

Roughness is the difference between sandpaper and a mirror. Sandpaper scatters light in every direction (roughness = 1), so it looks flat and matte. A mirror reflects light perfectly in one direction (roughness = 0), so you see sharp reflections.

Metalness is the difference between a wooden plank and a chrome faucet. Wood absorbs light and shows its own color (metalness = 0). Chrome has no color of its own — it only shows you a reflected image of the world around it (metalness = 1).

With just these two numbers, you can describe almost any surface in the real world. That is the power of physically-based rendering.

The PBR Decision Flow

Choosing the right material is simpler than it looks. Follow this flow to pick between Standard and Physical.

Realistic surface?

Do you need PBR lighting?

Standard Material

Roughness + metalness covers 90% of surfaces

Special effect?

Glass, car paint, fabric, soap bubbles?

Physical Material

Clearcoat, transmission, sheen, iridescence

Guided Walkthrough

Let us create three very different surfaces using just roughness and metalness.

Step 1 — Smooth plastic (like a toy)

step-1-plastic.tsxTSX
<mesh>
  <sphereGeometry args={[1, 64, 64]} />
  <meshStandardMaterial
    color="#4488ff"
    roughness={0.3}
    metalness={0}
  />
</mesh>

Metalness is 0 because plastic is not a metal. Roughness is low so you get a slight sheen, like a shiny toy. The blue color comes from the material itself, not reflections.

Step 2 — Brushed steel (like a kitchen appliance)

step-2-steel.tsxTSX
<mesh>
  <sphereGeometry args={[1, 64, 64]} />
  <meshStandardMaterial
    color="#cccccc"
    roughness={0.4}
    metalness={1}
  />
</mesh>

Metalness is 1 because steel is a metal. Roughness is 0.4 for that brushed look — you can see blurry reflections but not sharp ones. The color is light grey, which gives it a steel tone.

Step 3 — Glass with transmission (Physical Material)

step-3-glass.tsxTSX
<mesh>
  <sphereGeometry args={[1, 64, 64]} />
  <meshPhysicalMaterial
    color="#ffffff"
    roughness={0}
    transmission={1}
    thickness={0.5}
    ior={1.5}
  />
</mesh>

This is where Physical Material shines. Transmission lets light pass through the object (like glass). The ior (index of refraction) controls how much things behind it distort — 1.5 is standard glass.

Without Environment MapWith Environment Map
EnvMapComparison.tsx
<mesh>
  <sphereGeometry args={[1, 64, 64]} />
  <meshStandardMaterial
    color="#cccccc"
    metalness={1}
    roughness={0}
  />
</mesh>
{/* No environment map — nothing to reflect */}

Without an environment map, metallic surfaces are pure black — there's nothing to reflect.

What you just learned

Roughness controls how sharp or blurry reflections are (0 = mirror, 1 = sandpaper)

Metalness should be 0 (non-metal) or 1 (metal) — never in between

MeshStandardMaterial handles 90% of real-world surfaces

MeshPhysicalMaterial adds glass, car paint, fabric, and iridescence on top of Standard

Question

If metalness should only ever be 0 or 1, how would you represent a rusty metal surface where some spots are bare metal and other spots are covered in rust (which is non-metallic)? Think about what kind of texture map you might need.

Think about it...

You have a MeshStandardMaterial sphere with metalness=1, roughness=0, and no environment map or lights in the scene. What color will it be?

Try These Challenges

Put what you learned into practice. Try each challenge in the demo above using the Leva controls, then check the solution.

Try This!

Beginner

Set roughness to 0 on all spheres — what do you see?

Try This!

Intermediate

Set metalness to 0.5 — is it realistic?

Try This!

Beginner

Switch envPreset to 'sunset' vs 'warehouse'

These are the patterns that trip up developers most often. Switch between Wrong and Fixed to compare the code side by side.

1
Textures look washed-out or too dark
Forgetting to set sRGB color space on color textures
Don't do this
color-space.tsxTSX
const colorMap = loader.load('/textures/wood.jpg');
// Defaults to linear — PBR math treats it as raw data
// Colors look grey and washed out

<meshStandardMaterial map={colorMap} />
Color textures are saved in sRGB but PBR lighting math needs linear values. Marking the texture as sRGB lets Three.js handle the conversion automatically. Only color and emissive maps need sRGB — normal, roughness, and metalness maps must stay linear.
2
Using metalness values between 0 and 1
Creates an unrealistic, muddy-looking surface
Don't do this
metalness.tsxTSX
// Half metal? This does not exist in nature
<meshStandardMaterial
  color="#cccccc"
  metalness={0.5}
  roughness={0.3}
/>
In the real world, a material is either metallic or non-metallic. There is no in-between. Values like 0.5 create a physically impossible look that appears muddy. If you need a transition (like rust on metal), use a metalness texture where each pixel is either 0 or 1.
3
Metallic surface appears completely black
No environment map for the metal to reflect
Don't do this
black-metal.tsxTSX
<meshStandardMaterial
  color="#ffffff"
  metalness={1}
  roughness={0}
/>
// No environment map = nothing to reflect = black
Metals get their visible color entirely from reflections. Unlike plastic or wood, they have no diffuse scattering. If there is nothing in the environment to reflect, the surface renders as pure black. Always provide an environment map when using metallic materials.

Best Practices

Always provide an environment map

PBR materials need something to reflect. Even a simple neutral studio HDR makes Standard and Physical materials look dramatically better than bare lights alone.

Keep metalness at 0 or 1

Real materials are either metal or non-metal. Use a metalness texture map for transitions (like rust on iron) where each pixel is 0 or 1.

Use Standard before Physical

Only upgrade to MeshPhysicalMaterial when you need clearcoat, transmission, sheen, or iridescence. Standard covers the vast majority of surfaces at a lower GPU cost.

Reference real-world values

Search for PBR material reference charts online. Real-world roughness and color values for wood, metal, fabric, and more will help you create convincing surfaces faster.