Блог

Я использую MTLloader из three.js библиотека, и я не знаю, почему, но текстура не загружается. Сетка становится полностью белой.

Однако, если я использую OBJ-файл, предоставленный примерами three.js библиотека, объект загружен со своей текстурой правильно.

Есть идеи?

Я публикую код:

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

Большое спасибо

Откройте в текстовом редакторе ваш файл .obj и найдите в нем ссылку на строку -nan . Замените -nan значение на 0.000000 . Иногда .obj-файл получает -nan при экспорте, а затем при отображении текстур происходит сбой в three.js .

Пример:

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

Это был мой случай. С -nan он будет загружаться с помощью OBJLoader, но при добавлении .mtl [OBJMTLLoader] произошел сбой. Итак, исправлением для меня была замена -nan на 0.000000 .