Having difficulties to match lighting from reference

Hi guys,

I’m just starting my THREE.js journey so 0 experience and I was wondering if I could pick any of your brains and help to figure out what the problem is with lighting.


I am loading an object and setting up one ambient light and three directional lights. The idea is to have one light illuminating from the right, one from the left, and one from the bottom (but again this might be a completely wrong approach, I’m just guessing here). However, I am unable to achieve the desired output.

The actual output is much darker, the chocolate is not as brown, and the green top and 1st quarted of of the strawberry is too bright

The desired output has been provided by the designer, .obj and .mtl files created and exported from Blender:

Actual output:

// Lights
const ambientLight = new THREE.AmbientLight(0xffffff, -18);

const directionalLight1 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight1.position.set(-5, 1, 1);

const directionalLight2 = new THREE.DirectionalLight(0xffffff, 40);
directionalLight2.position.set(60, -80, 10);

const directionalLight3 = new THREE.DirectionalLight(0xffffff, 40);
directionalLight2.position.set(140, -100, 1);

// Load model
new MTLLoader()
    side: THREE.DoubleSide,
    wrap: THREE.ClampToEdgeWrapping,
  .load("untitled.mtl", (materials) => {

    new OBJLoader()
        (object) => {
          object.position.y = 0;
          object.position.z = 0;
          object.traverse((child) => {
            if (child.isMesh) {
              // child.castShadow = true;
              // child.receiveShadow = true;
              child.material.shininess = 50; // Increase shininess for a glossy look
              child.material.reflectivity = 1; // Increase reflectivity
        (xhr) => {
          // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        (error) => {
          console.log("An error happened", error);

this isn’t lit by harsh lightsources but by environment. everything that looks good usually is.

start by using a plain old hdri but later you can experiment with making your own.

btw i’ve made a small tutorial about what kind of impact environments have. basically you do the same thing photographers do with lightformers, if you’re ever seen these giant white boxes they use or umbrellas, that is exactly what you employ in threejs as well. in photography it is called “painting with light”.

you can go from this

to this with only an envmap

sandbox for that example: Building live envmaps - CodeSandbox

ps first try some of these HDRIs • Poly Haven and then explore further

Thanks a lot for getting back to me, much appreciated. Your Porsche codesandbox looks sick! I’m only going through threejs-journey so I don’t have much experience in three.js but I’ll look into HDRIs and envmaps