Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!