Search code examples
canvasthree.js3drenderingtextures

Can we preload texture / image in Threejs to avoid waiting during the render?

I'm currently working on a feature where I want to display texture changes of an object over time. To do that, I use a timeline. When the user clicks on a specific point, it loads the new values attached to the object (size, texture, color, etc...).

enter image description here

Problem is that it takes a bit more than a second to load the changes. Is there a way to load the data immediately on change? For example, preload the texture images ? Here's how I load my texture :


    let planeMaterial = new THREE.MeshBasicMaterial(
    {
       map: new THREE.TextureLoader().load(require("../../public/img/fondplan/" + floorFileName + ".jpg"), 
    () => { renderer.render(scene, this.camera); }),
       side: THREE.DoubleSide,
    });
Solution

  • Consider to load all textures during the application start. You can show a loading screen in the meanwhile.

    Use a single instance of TextureLoader for loading all assets and don't forget to create the loader with an instance of LoadingManager. The manager provides an onLoad() callback that you can use to detect the completion of the loading process.

    Additionally, use WebGLRenderer.initTexture() after your textures have been loaded to minimize the overhead when the textures are used for the first time.