THREE.MTLLoader does not load texture image

Question

i create a three js program that load mtl and obj and show on scene when run program show no texture and show black object.

i use mtl loader and obj loader and add files in root folder of host this code work on three js site fine and i copy this code in my program but dont work for me.

i also use light ambien light and point light.

its link my model : my program

here my code:

        import * as THREE from './three.module.js';
        import { DDSLoader } from './jsm/loaders/DDSLoader.js';
        import { MTLLoader } from './jsm/loaders/MTLLoader.js';
        import { OBJLoader } from './jsm/loaders/OBJLoader.js';

        var container;

        var camera, scene, renderer;

        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;


        init();
        animate();


        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

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

            // scene

            scene = new THREE.Scene();

            var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
            scene.add( ambientLight );

            var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
            camera.add( pointLight );
            scene.add( camera );

            // model

            var onProgress = function ( xhr ) {

                if ( xhr.lengthComputable ) {

                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

                }

            };

            var onError = function () { };

            var manager = new THREE.LoadingManager();
            manager.addHandler( /\.dds$/i, new DDSLoader() );

            // comment in the following line and import TGALoader if your asset uses TGA textures
            // manager.addHandler( /\.tga$/i, new TGALoader() );

            new MTLLoader( manager )
                .setPath( '/' )
                .load( 'char4.mtl', function ( materials ) {
                                            console.log(materials);
                    materials.preload();

                    new OBJLoader( manager )
                        .setMaterials( materials )
                        .setPath( '/' )
                        .load( 'char4.obj', function ( object ) {
                                                            object.scale.set(20,20,20);
                            scene.add( object );

                        }, onProgress, onError );

                } );

            //

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousemove', onDocumentMouseMove, false );

            //

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

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

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

        }

        function onDocumentMouseMove( event ) {

            mouseX = ( event.clientX - windowHalfX ) / 2;
            mouseY = ( event.clientY - windowHalfY ) / 2;

        }

        //

        function animate() {

            requestAnimationFrame( animate );
            render();

        }

        function render() {

            camera.position.x += ( mouseX - camera.position.x ) * .05;
            camera.position.y += ( - mouseY - camera.position.y ) * .05;

            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

Answer 1

Your MLT file contains a Kd entry which represents the diffuse color and a map_Kd entry which represents a diffuse color texture. E.g.

Kd 0.00 0.00 0.00
map_Kd char4.png

So the diffuse color is black. The (unofficial) MTL spec says: material diffuse is multiplied by the texture value. And that means all final color values are black in your case.

You can easily fix the issue my changing all Kd values to 1.00 1.00 1.00.