Question

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

我使用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说：材质漫反射乘以纹理值。这意味着所有最终颜色值在您的情况下均为黑色。

将所有Kd的值更改为1.00 1.00 1.00，就可以轻松解决该问题。

THREE.MTLLoader不加载纹理图像

1 个答案: