Problem in recreating the same mesh calling the same function multiple times

Hello,
Here is my PG https://playground.babylonjs.com/#KI8BJH#22
the problem is that I want to recrate stairs in different places, for that I recall @Necips function rollit() two times in order to made a new stair near of the first stair but the problem is that it appears only the stair of last function call, the other one disappear :frowning:
I don’t want to create a specific function for each stair I want to use the same function

help me please

@Wingnut another challenge :stuck_out_tongue:

Hi Anes. Hey, thanks for choosing me. :slight_smile: I’m really not qualified to answer this, but I don’t think you will be able to operate multiple e-stairs… with a single rollit() func.

I think… you need to study OOP… object oriented programming… as it applies to JavaScript. I think you need an eStairs “class”… which I think can be called a “factory”. By using the ‘new’ keyword… your eStairs class/factory… creates eStairs “instances”. It might look something like this:

var myStairs1 = new eStairs(“name”, color, height, length, stairsCount);
var myStairs2 = new eStairs(“name”, color, height, length, stairsCount);
var myStairs3 = new eStairs(“name”, color, height, length, stairsCount);

Every call/order to the eStairs factory… returns a ‘new’ eStairs-class object, and EACH instance… has its own rollit() function… or possibly two functions… rollUp() and rollDown(). But maybe best… each eStairs instance has an updateRoll() function. You would call it like… myStairs1.updateRoll().

Inside an eStairs.updateRoll() function, you would see/use LOTS of this stuff. First thing in the func, you might use many properties and methods that YOUR Anes-built factory… installed on each ‘constructed’ eStairs-class JS object. this.rollDirection, this.isRolling, this.isStopped. Those are all property-type class-members.

There are also method-type class members, such as this.start(direction), this.stop(), this.getRollingState(), this.setColor(), this.anythingElse(). Do you see how EACH ‘instance’ constructed by the eStairs class factory… has all the tools IT needs for itself to fully operate… ON itself. That’s why the this keyword is used often/easily… within on-class functions and properties (class members).

By operating this way, all your eStairs-class objects… are self-contained. Each has a rollit() or update() function that NEVER collides-with other eStairs. AND, did you notice that ‘global’ variable I added to your scene… called direction (at the top of scene)? THAT… has to go. That is not a self-contained property… and would affect ALL eStairs-class objects… which is no good. Each eStairs needs an eStairs.direction, ie. this.direction.

Read, read, read, about JS OOP and classes. Here is a demo made by a BJS user… Screensaver Lots of bugs, many are at different leg-animation positions from each other.

With certain BJS animation techniques, you won’t need a this.updateAnimation() or this.doAnimStep(). But in your case, where you are moving MANY items per animation step, you may INDEED need a this.updateAnim() on each class instance.

Here is the “bug factory” used to produce each bug…

The BJS StandardMaterial is a class/factory, too. Notice the ‘new’ keyword:
somemesh.material = new BABYLON.StandardMaterial(blah, blah, blah)

As you create many eStairs, you might wish to push each eStairs instance… into an array… possibly called allStairs.

Then you have power to do this… within the scene’s render loop:

for (stairs of allStairs) {
    stairs.updateAnim(); // move stairs one-anim-step up, or down, or not at all... if this.isStopped = true;
}

Using JS OOP-like stuff… there is one HUGE advantage. Class/factory re-use. It will take a bit of time to feel comfortable with OOP and classes and factories, but after you get there, you will have a toolbox full of classes that you have built and collected from others. Having that toolbox-o-classes can make future projects… take only 1/10 the time to create… than ones you created earlier in your career/learning. You might have a myTools.js file that you include in ALL your projects… and inside that… lots of things to make BJS scene dev SUPER EASY… for a long future.

Just think about how many BJS StandardMaterial’s have been ‘instanced’ across how many years. Maybe over 100,000. How many BJS scenes DIDN’T need to manually code a standard material? Bunchezzzz. The BJS StandardMaterial is a wonderfully-useful and re-usable factory, eh? So is the BJS Scene Class - var scene = new BABYLON.Scene(engine);

There’s lots more to learn… and I am not a qualified teacher. The web… is your friend on this. You might need an ‘intense’ week or month of learning… to become proficient in OOP for JS… but there are free examples EVERYWHERE… and start small. Start-out by building little factories that makes objects with 3 properties and 3 methods on it, perhaps.

Learn when to use ‘get’ and ‘set’ functions on properties (sometimes called wrapper funcs). Notice our BJS cameras… sometimes using simple camera.position, and sometimes using camera.setPosition() and .getPosition().

Lastly, be patient with yourself. Becoming good at OOP… is a very worthwhile learn/challenge. If you continue developing in your future, you will thank yourself MANY times… for taking the time to learn OOP techniques.

Stay tuned for comments/wisdom from others, and start reading on the web… about JS classes/factories, and ‘new’ and ‘this’. Notice that almost every class/factory… ends with return this;

Good luck… go get 'em! Classmaster Anes… on the job! :slight_smile:

1 Like

@Wingnut thank you for your detailed reply, I tried to use my bit knowledge of OOP and now I can create lot of stairs in different places and control them separately https://playground.babylonjs.com/#KI8BJH#23
I think using function in JS will be enough cuz everything is object in JS.
and about material I create stairMaterial=scene.getMaterialByID(“material_Id”);
and then I wanted to use this stairMaterial var which is globle outside append function my stair still white I don’t see why material doesn’t work outside and it works fine iside append function !

1 Like