Moving from THREEjs to BABYLONjs

[jade]

Hi I’m Julio from Costa Rica and I’m new to the forum.

I’m getting to know Babylon.js and so far what I’ve read, seems pretty cool. Documentation is really good.

I’ve done a few three.js demos and I want to re-create them using Babylon.js. I’ll post some examples as soon as I get something done. Please feel free to add suggestions or comments.

Thanks a lot in advance.

[JohnK]

Hi @jade and welcome to the community. Looking forward to seeing your demos and the Babylon.js versions. Plenty of help available here on the forum for you.

[Deltakosh]

Welcome!!! Can’t wait to see your demos!

[sebavan]

Welcome @jade !!!

[jade]

Hi, thanks a lot. I’m glad to be here.

Quick question, I have a basic scene with a box.

Babylon.js Playground

The hemispheric light seems to only illuminate the top part of the box.
I tried adding sideOrientation: BABYLON.Mesh.DOUBLESIDE but didn’t work.

How can I make the light affect both sides of the box ?

Thanks

[sebavan]

hemispheric is like a vertical ambient with a ground color on the bottom and a sky one at the top so ambient++

you can just make both color as you please: https://playground.babylonjs.com/#Q9VZS9#1007

[Pryme8]

[jade]

Hi. I added a few more things to the code.

I have a renderPlanes function to dinamically generate several “planes” (box meshes). I want to animate those planes so I added a rotatePlanesAnimation : BABYLON.Animation I set it up and then I push it to each planeMesh.

The code seems to run, but nobody is moving! Any hints?

Here’s my playground
Plane Examples | Babylon.js Playground (babylonjs.com)

Thanks a lot

[Dad72]

You must fill in the target in this function.

scene.beginAnimation(rotatePlanesAnimation, 0, 30, true);

I made a quick edit so you can see what I mean :

Babylon.js Playground

Here all the plans are animated

Babylon.js Playground

[carolhmj]

Hello and welcome to the forum!

[mawa]

Hi and welcome to the Community.

@jade

I’ll post some examples as soon as I get something done

Yes, please do. We are always eager to see what can be achieved with other engines. And then, rest assured that if you cannot do BETTER and EASIER with BJS, we’ll make sure to fix it ASAP

@jade

Documentation is really good.

Totally agree. The doc, the PGs, the snippets servers AND the community altogether are the pillars and unique advantages that made me make the move to BJS. Not to mention that (in my opinion) this framework and these people are the most trustable from the new Internet.

Again, welcome to our family and hope to hear from you soon. Meanwhile, have a great day

[jade]

Hi. Thanks a lot for your help.

Would it make sense to add this line " scene.beginAnimation(planes[i], 0, 30, true);" inside the renderPlanes function, so the code doesn’t loop twice through all the plane elements?

Please check line 64

Babylon.js Playground

Thanks

[mawa]

I don’t see the code looping twice. All I see is that your animation does not perform a revolution.
I would likely have done something like this:

Babylon.js Playground

Or else, use the ‘scene.registerBeforeRender’ function that runs any code at 60fps.

[jade]

Hi @mawa ok I see.
To perform a whole revolution, the frames must go from 0 to 360 degrees and that is 2 * π. Got it.

Regarding the loops, I meant having only one loop instead of two. So I added this line
scene.beginAnimation(planeMesh, 0, 360, true); inside the renderPlanes function. Just because it’s already looping through the recently created plane meshes.

Here’s my resulting PG

Babylon.js Playground

Is it a good idea to use the FPS parameter on the BABYLON.Animation to handle animation speed?
Would it be better to use a variable, from 0 to 1 ?

Thank you very much for your help.

[mawa]

@jade

So I added this line
scene.beginAnimation(planeMesh, 0, 360, true); inside the renderPlanes function

Yes, I understand now. I believe it doesn’t make a difference. The animation cannot run multiple times (at least not in a for loop). Only the last will be accounted. But I agree it’s cleaner this way.

@jade

a good idea to use the FPS parameter on the BABYLON.Animation to handle animation speed

It always is. Although from what you have now, there is little chance that even lower end systems will run at a lower frame rate. But it’s still good practice to do so, I believe. Not as if it was a lot of additional effort

[JohnK]

@jade

Is it a good idea to use the FPS parameter on the BABYLON.Animation to handle animation speed?

A couple of Babylon.js things to research engine.getDeltaTime and scene.getAnimationRatio

[jade]

Is there a way to reference or use something like the optional onAnimationEnd from CreateAndStartAnimation?

I want to animate the planes one by one, so the code needs to know when each animation ends.

Thanks

[JohnK]

How to use onAnimationEnd

Hi @mecanicus <- cool handle! Here is how we use it in a jump animation… animo = nx.scene.beginAnimation(nx.aSkeleton[0], 20, 25, false, 1.0); //compress animo.onAnimationEnd = function (){ var jmp1 = nx.scene.beginAnimation(nx.aSkeleton[0], 25, 35, false, 1.0); //jump apex jmp1.onAnimationEnd = function(){ nx.anmz.jump.jumpMode = 0; var jmp2 = nx.scene.beginAnimation(nx.aSkeleton[0], 35, 50, false, 1.0); …

[jade]

Hi, I managed to trigger one animation after the other.
Please excuse me for the “non elegant” code. I’m aware that on line 66, this is the book definition of “callback hell” (just wanted to make it work quickly)

Anyways, why is the first block moving permanently? I want to make it behave like the rest of them. Rotate once and then stop. Then the next one.

Here’s my PG

Babylon.js Playground

Thanks a lot

[jade]

Sorry, sent the wrong PG.
Now callback hell is on line 58

Question: when I create a mesh, using BABYLON.MeshBuilder.CreateBox, then I can add an array of animations to that mesh. How does that work? Does it mean the animations will run at the same?
Is BABYLON.Animation supposed to have ONLY one targetProperty?

Thanks a lot in advance.

Plane Examples | Babylon.js Playground (babylonjs.com)