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:
And the image is still undefined... I'm quite sure the issue comes from:
textureLoader.load(pathName)
I'm open to any suggestions !
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);
});