Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

166
Vistas
Three js - Textures Loading - async / await

I did a Drawing class:

export class Drawing {
    constructor(texture) {        
        const material = new MeshBasicMaterial({
            color: 0xffffff,
            map: texture
        });
        this.mesh = new Mesh(new PlaneGeometry(texture.image.naturalWidth / 20, texture.image.naturalHeight / 20), material);
    }

    setPosition(x, y, z) {
        this.mesh.position.x = x;
        this.mesh.position.y = y;
        this.mesh.position.z = z;
    }
}

I would like to access the texture.image properties in order to set the PlaneGeometry. So, before invoking a Drawing object, I do some async/await calls to load the textures (the Drawing invokations are made in the World constructor):


let world;
let raycasterDown;
let prevTime = performance.now();
const direction = new Vector3();
const globalInputs = new GlobalInputs();
const textureLoader = new TextureLoader();

const promiseTextureBack = (pathName) => {
    return new Promise((resolve) => {
        resolve(textureLoader.load(pathName));
    });
}

const allTexturesPromises = [];
drawingPaths.map(pathName => {          //drawingPaths is an array of string
    allTexturesPromises.push(promiseTextureBack(pathName));
});

const loadingWorld = async () => {
    const allTextures = await Promise.all(allTexturesPromises); 
    console.log(allTextures[0]);
    world = new World(allTextures);
    document.body.appendChild(world.renderer.domElement);
    world.instructions.addEventListener('click', function () {
        world.controls.lock();
    });
    world.controls.addEventListener('lock', function () {
        world.instructions.style.display = 'none';
        world.blocker.style.display = 'none';
    });

    world.controls.addEventListener('unlock', function () {
        world.blocker.style.display = 'block';
        world.instructions.style.display = '';
    });
}

init();

function init() {
    loadingWorld();
    raycasterDown = new Raycaster(new Vector3(), new Vector3(0, -1, 0), 0, 10);
    document.addEventListener('keydown', (event) => {
        globalInputs.onKeyDown(event);
    });

    document.addEventListener('keyup', (event) => {
        globalInputs.onKeyUp(event);
    });
    window.addEventListener('resize', onWindowResize);
    animate();
}

Nevertheless,

    console.log(allTextures[0]) 

in the loadingWorld returns:

enter image description here

And the image is still undefined... I'm quite sure the issue comes from:

textureLoader.load(pathName)

I'm open to any suggestions !

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The load method takes a callback. It doesn't return anything that you can call resolve with. Instead of all this promiseTextureBack code, just use the loadAsync method which returns a promise:

const allTexturesPromises = drawingPaths.map(pathName => {  
    return textureLoader.load(pathName);
});
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda