TLDR; Fully Metallic materials in ThreeJS don’t respond to non-directional lights - eg. Ambient or Hemisphere Lights. Adjust the material to be non-metallic, or add Directional lights to the scene

The MeshStandardMaterial in ThreeJS (and all materials that inherit from it - MeshPhysicalMaterial etc.) have a metallness attribute.

The metallness attribute defines how metalic the material should appear. It’s a float, with values from 0 to 1.0. 0 being not metallic at all, 1.0 being fully metallic.

Often when working with scenes, you may see a material showing up as fully black, even when there are lights in the scene. This metallness value might be the cause of that.

In ThreeJs fully metallic materials only respond to non-directional lights. If you’ve only got AmbientLight or HemisphereLight lights lighting your scene, anything with a metallness value of 1.0 will be fully black.

Fully Metallic Black Material A test prop with a material set to be fully metalic, and only AmbientLight lights lighting the scene, leaving a fully black output material

There’s a handful of different ways to fix this, depending on the scene, materials and effect you need.

1. Turn off the metallness on the material

  • Pros It’s simpler to test
  • Cons With only non-direction lights you’ll have a flat looking scene

Often the metallness value might have been mis-set in the original scene. Simply setting it to 0 will allow the material to be lit1:

mesh.material.metallness = 0
mesh.material.needsUpdate = true

Non Metallic with Ambient Lighting Materials adjusted to be non-metalic, with only an AmbientLight lighting the scene

2. Add directional lights to the scene

  • Pros Properly setup lighting will give good looking shadows
  • Cons It’s more involved and expensive on the render

This depends on what your scene needs to look like, but just adding a directional light will show up the material properly. You’ll probably want a handful of lights at different intensities and positions around the center point2.

var light = new THREE.DirectionalLight('#ffe6ae', 5)
light.position.set(7.5, 5, 10)

Adding Directional Lighting The same scene, with the materials set to non-metalic, but with 3 DirectionalLight lights added around the object, and shadow maps enabled

  1. Be sure to set needsUpdate to true when modifying any material values otherwise you won’t see the changes. material.needsUpdate = true [return]
  2. Directional Lights default to a target of [0,0,0] unless you set an alternative. [return]