I've created a simple model viewer with ThreeJS. I load from .mtl, and .obj (with textures) files. Everything works fine except textures. If I use ambient light, textures appear washed out. If I disable ambient light, textures are not shown at all. I'm running this in an Android App with WebView.

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 3;


        scene = new THREE.Scene();

        ambient = new THREE.AmbientLight(0x404040);
        scene.add(ambient);


        renderer = new THREE.WebGLRenderer();

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.appendChild(renderer.domElement);


        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;

        window.addEventListener('resize', onWindowResize, false);

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.load('../foods_models/7/mtl.mtl', function (materials) {
            materials.preload();

            if (materials.materials.default != undefined) {
                materials.materials.default.map.magFilter = THREE.NearestFilter;
                materials.materials.default.map.minFilter = THREE.LinearFilter;
            }
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.load('../foods_models/7/obj.obj', function (object) {
                scene.add(object);
                zoomCameraToSelection(camera, controls, object);
            });
        });

I've created a simple model viewer with ThreeJS. I load from .mtl, and .obj (with textures) files. Everything works fine except textures. If I use ambient light, textures appear washed out. If I disable ambient light, textures are not shown at all. I'm running this in an Android App with WebView.

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 3;


        scene = new THREE.Scene();

        ambient = new THREE.AmbientLight(0x404040);
        scene.add(ambient);


        renderer = new THREE.WebGLRenderer();

        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        container.appendChild(renderer.domElement);


        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.25;
        controls.enableZoom = true;

        window.addEventListener('resize', onWindowResize, false);

        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.load('../foods_models/7/mtl.mtl', function (materials) {
            materials.preload();

            if (materials.materials.default != undefined) {
                materials.materials.default.map.magFilter = THREE.NearestFilter;
                materials.materials.default.map.minFilter = THREE.LinearFilter;
            }
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.load('../foods_models/7/obj.obj', function (object) {
                scene.add(object);
                zoomCameraToSelection(camera, controls, object);
            });
        });

• javascript
• android
• textures

2 Answers 2

I came upon this post while researching a problem I had with a mapped texture looking washed out on my project.

I'm working in REACT THREE FIBER, but I wanted to share my solution in case there are others on the same search... I'm finding the documentation is related.

There is an issue related to sRGB encoding in THREE. In RTF you would use the linear and flat props on your <Canvas/>:

<Canvas
  linear
  flat
>
...
</Canvas>

https://github./pmndrs/react-three-fiber/blob/master/markdown/api.md?plain=1#L50-L51

I'm not sure how to adapt that to vanilla THREE, but this ment helped get get me there in React:

Gamma correct treatment of sRGB textures in THREE.js

For vanilla ThreeJS you need to set the colorSpace property on your texture to THREE.SRGBColorSpace. For some reason it defaults to THREE.NoColorSpace by default, which can cause the textures to look washed out. For example:

const texture = new THREE.CanvasTexture(textureImageBitmap)
texture.colorSpace = THREE.SRGBColorSpace