Mtl colors not imported correctly in three.js

Hello Everyone,
I’m new at 3d and three.js in general, I’ve imported a mtl map from blender, and when i see the colors in three js are slightly different from the one in blender

MTL map

newmtl Material.001
Ns 553.892639
Ka 0.944700 0.944700 0.944700
Kd 0.313988 0.791297 0.814847
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 3

newmtl Material.005
Ns 431.410095
Ka 1.000000 1.000000 1.000000
Kd 1.000000 0.022174 0.246201
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2

thank you everyone

Could be a color space related issue. Please share the entire OBJ/MTL asset in this topic as well as your renderer setup.

the obj file is a bit big to share in here, how can i add it?

  mounted() {
      var model, camera, pos, controls, scene, renderer, geometry, geometry1, material;
      let vm = this;

      function init() {
        let container = document.getElementById('container');

        camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        camera.position.z = 2;

        scene = new Three.Scene();
        scene.background = new Three.Color( 0xffffff );

        var ambientLight = new Three.AmbientLight(0xffffff, 0.5)
        scene.add(ambientLight)

        var light = new Three.PointLight( 0xffffff, 1, 10000 );
        light.position.set( 0, 100, 600);
        scene.add( light );


        var mtlLoader = new MTLLoader();
        mtlLoader.load('shape.mtl', function(materials) {
            materials.preload();
            var objLoader = new OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.load('shape.obj', function(object) {
                model = object
                model.receiveShadow = true;
                model.position.x =  0.3;
                model.rotation.set(0, -10, 0)
                scene.add(model)
            });
        });

        renderer = new Three.WebGLRenderer({antialias: true});
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);

    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    init();
    animate();

    // Full Height
  }```

Would it be possible to be a problem with light color? See this demo. When the light is white, the two plates have the colors as in your Three.js image. When the light is blue-ish, the colors look like in your Blender image (click the two buttons to change the color):

https://codepen.io/boytchev/full/WNgWEQe

image

2 Likes

You should definitely add the following line to your code:

renderer.outputEncoding = THREE.sRGBEncoding;

Big assets can be shared with a service like Google Drive.

thank you for the help

I can’t see something unusual when testing the asset with three.js. The model and especially its colors are rendered as expected (assuming a correct sRGB workflow with the latest loaders).

For testing purposes, I’ve replaced MeshPhongMaterial with MeshBasicMaterial so there is no influence of lights on the asset.

The difference compared to Blender could indeed happen because of different lighting.

Alternatively, I suggest you try to export the asset with glTF instead and see if it produces a different result. glTF should be your first choice anyway.

1 Like

Blender also uses a filmic tone map by default. You can disable that in Blender color management to compare. The closest option in three.js is probably ACESFilmicToneMapping, but it is not quite the same.

1 Like