Set class property from material image

Questions
, ,
1

Hi,

I have a custom class that inherits from MeshBasicMaterial and I want it to have a size property set upon creation and getting the value from the image loaded into it. How could I achieve that? I cannot find the proper way to do it (new to three.js and JS in general).

Here’s the code I have so far:

const fs = require('fs');
const Path = require('path');
const sequencesmap = new Map();
const manager = new THREE.LoadingManager();
const textureloader = new THREE.TextureLoader(manager);

class ImageSequence extends THREE.MeshBasicMaterial {
    constructor( name, path, digits=3 ) {
        super({
            color: 0xffffff,
            transparent: true,
            side: THREE.DoubleSide
        });
        this.name = name;
        this.path = path;
        let imgfiles = fs.readdirSync(this.path);
        this.imgs = new Array(imgfiles.length);
        for(let i=0; i < this.imgs.length; i++) {
            this.imgs[i] = textureloader.load(this.path + "/" + imgfiles[i], function (tex) {
                tex.image.width;
                tex.image.height;
            });
        }
    }
}

Actually, what I’m trying to achieve is the following:
I have two lists, one of mesh planes and one of materials (image sequences). Any material can be assigned to any mesh, and all image collections are stored in their own directory. When a material is assigned, if it does not yet exist, it should be created from the images in the directory with that name. E.g.: when adding a mesh with add( meshname, texturename) the material texturename must be created from the images in a folder named texturename then applied to the mesh and the mesh resized to the correct size (or aspect ratio).

What is the best approach? I got as far as creating the materials dynamically but I can’t find a way to resize the mesh because texture.map.image is always undefined in the constructor.

Thanks!