javascript - 三.MTLLoader 不加载纹理图像

Question

我创建了一个加载 mtl 和 obj 并在场景中显示的三个 js 程序
运行程序时不显示纹理并显示黑色对象。
我使用 mtl loader 和 obj loader 并在主机的根文件夹中添加文件
这段代码在三个 js 站点上运行良好，我在我的程序中复制了这段代码，但对我不起作用。
我也使用光环境光和点光。
它的链接我的模型:my program
这是我的代码:

        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

您的 MLT 文件包含 Kd表示漫反射颜色和 map_Kd 的条目表示漫反射颜色纹理的条目。例如。

Kd 0.00 0.00 0.00
map_Kd char4.png

所以漫反射颜色是黑色的。 (非官方)MTL spec说: Material 漫反射乘以纹理值。这意味着在您的情况下，所有最终颜色值都是黑色的。
您可以轻松解决我更改所有 Kd 的问题值为 1.00 1.00 1.00 .