Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/418.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript THREE.MTLLoader不加载纹理图像_Javascript_Three.js - Fatal编程技术网

Javascript THREE.MTLLoader不加载纹理图像

Javascript THREE.MTLLoader不加载纹理图像,javascript,three.js,Javascript,Three.js,我创建了一个三js程序,加载mtl和obj并在场景中显示 运行程序时,不显示纹理并显示黑色对象 我使用mtl加载器和obj加载器,并在主机的根文件夹中添加文件 这段代码在三个js站点上运行良好,我在我的程序中复制了这段代码,但不适用于我 我也使用灯光环境光和点光源 其链接我的模型: 这是我的代码: import * as THREE from './three.module.js'; import { DDSLoader } from './jsm/loaders

我创建了一个三js程序,加载mtl和obj并在场景中显示 运行程序时,不显示纹理并显示黑色对象

我使用mtl加载器和obj加载器,并在主机的根文件夹中添加文件 这段代码在三个js站点上运行良好,我在我的程序中复制了这段代码,但不适用于我

我也使用灯光环境光和点光源

其链接我的模型:

这是我的代码:

        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 );

        }

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

Kd 0.00 0.00 0.00
map_Kd char4.png
所以漫反射颜色是黑色的。(非官方)说明:材质漫反射乘以纹理值。这意味着在你的例子中所有的最终颜色值都是黑色的

您可以轻松解决将所有
Kd
值更改为
1.00 1.00 1.00
的问题