Question

我使用了three.js库的MTLloader，但我不知道为什么但纹理没有加载。网格变成完全白色。

但是，如果我使用three.js库的示例提供的OBJ文件，则对象将正确加载其纹理。

有什么想法吗？

我发布了代码：

function loadObj(urlObj, urlObjMtl, urlHairCompl){

        var container, stats;
        var camera, scene, renderer;

        var mouseX = 0, mouseY = 0;
        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

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

                controls = new THREE.TrackballControls( camera );

                controls.rotateSpeed = 2.0;
                controls.zoomSpeed = 4;
                controls.panSpeed = 2;

                controls.noZoom = false;
                controls.noPan = false;

                controls.staticMoving = false;
                controls.dynamicDampingFactor = 0.3;
                // scene
                scene = new THREE.Scene();
                var ambient = new THREE.AmbientLight( 0x444444 );
                scene.add( ambient );

                var directionalLight = new THREE.DirectionalLight( 0xffeedd );
                directionalLight.position.set( 0, 0, 1 ).normalize();
                scene.add( directionalLight );

                // model
                var loader = new THREE.OBJMTLLoader();
                if (urlObj !== null){
                    loader.load( urlObj, urlObjMtl, function ( object ) {

                            object.position.y = 0;
                            object.position.z = -10;
                            scene.add( object );
                    } );
                }


                var display = document.getElementById('display') ;
                renderer = new THREE.WebGLRenderer( { canvas: display } );


               // 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 );
                controls.handleResize();
        }


        function animate() {
                //requestAnimationFrame( animate );
                //render();

            requestAnimationFrame( animate );
            controls.update();
            renderer.render( scene, camera );

        }

        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

在txt编辑器中打开您的.obj文件，并在其中搜索字符串引用-nan。将-nan值替换为0.000000。有时.obj文件在导出时得到-nan，而在三个.js中映射纹理失败。

示例：

vn -nan -nan -nan" should be "vn 0.000000 0.000000 0.000000

那是我的情况。对于-nan，它将使用OBJLoader加载，但是当添加.mtl [OBJMTLLoader]时它会失败。因此，修复我的问题是将-nan替换为0.000000。

使用three.js的MTLLoader进行纹理问题

1 个答案: