Delay in rendering of, textures on obj/fbx 3D model

Questions
, , , , , ,
1

The 3D model renders black at first and later their respective images loads on the model. I need to render the 3d with full texture without black image shown first. Can we expect this behavior, without converting them to .gltf. the file size is large of fbx/obj model.

animate = () => {
        window.requestAnimationFrame(this.animate);
        this.controls.update(); 
        this.renderer.render(this.scene, this.camera);
      };

     var mtl = new MTLLoader();
     var objl = new OBJLoader();
      mtl.load("3d.mtl", materials => {  
         materials.preload();     
         objl.setMaterials(materials).load("3d.obj",object => {  
                    this.scene.add(object);
                    this.renderer = new THREE.WebGLRenderer();
                    this.container.appendChild( renderer.domElement );
                    this.animate();
             },
             onProgress,
             onError
           );
      });
2 Likes
2

yeah, it’s easy. Just wait until the textures load before you add the object to the scene.

To do that - you’ll have to write a bit of custom code which will depend on the type of textures that you use.

here’s a snippet I wrote for my own use, feel free to use it:


/**
 *
 * @param {Texture} t
 * @returns {Promise<Texture>}
 */
function promiseTextureLoaded(t) {
    return new Promise(function (resolve, reject) {
        let image = t.image;
        if (image === undefined) {
            //FIXME this is not a pleasant logic which should be replaced. THREE.js v75 (current) does not offer a better way.
            Object.defineProperty(t, 'image', {
                set: function (i) {
                    image = i;
                    resolve();
                },
                get: function () {
                    return image;
                }
            });
        } else if (image.complete) {
            resolve(t);
        } else if (typeof image.addEventListener === "function") {
            image.addEventListener('load', resolve);
            image.addEventListener('error', reject);
        } else {
            resolve();
        }
    })
}

extracting textures will be up to you. I could share the code for that, but it’s more than 1000 lines overall.

1 Like