# Moving from THREEjs to BABYLONjs **URL:** \ **Category:** Demos and projects\ **Created:** [August 11, 2022, 8:12pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955 "2022-08-11T20:12:23Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 11, 2022, 8:12pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/1 "2022-08-11T20:12:23Z")
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. ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [August 11, 2022, 8:18pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/2 "2022-08-11T20:18:44Z")
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. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [August 11, 2022, 9:35pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/3 "2022-08-11T21:35:07Z")
Welcome!!! Can’t wait to see your demos! ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [August 11, 2022, 11:16pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/4 "2022-08-11T23:16:07Z")
Welcome @jade !!! ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 11, 2022, 11:21pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/5 "2022-08-11T23:21:08Z")
Hi, thanks a lot. I’m glad to be here. Quick question, I have a basic scene with a box. > **[Babylon.js Playground](https://playground.babylonjs.com/#Q9VZS9%231006)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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 ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [August 11, 2022, 11:27pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/6 "2022-08-11T23:27:01Z")
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](https://playground.babylonjs.com/#Q9VZS9#1007) ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [August 12, 2022, 12:27am UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/7 "2022-08-12T00:27:41Z")
![](https://c.tenor.com/-MTAOUsKfuoAAAAC/freaks-one-of-us.gif "One Of Us GIF - Freaks One Of Us Accepting - Discover & Share GIFs") ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 12, 2022, 5:12am UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/8 "2022-08-12T05:12:29Z")
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)](https://playground.babylonjs.com/#Q9VZS9#1014) Thanks a lot ---
**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\ **Post date:** [August 12, 2022, 10:50am UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/9 "2022-08-12T10:50:40Z")
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](https://playground.babylonjs.com/#Q9VZS9%231015)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Here all the plans are animated > **[Babylon.js Playground](https://playground.babylonjs.com/#Q9VZS9%231016)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [August 12, 2022, 10:53am UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/10 "2022-08-12T10:53:40Z")
Hello and welcome to the forum! 😃 ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [August 12, 2022, 12:23pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/11 "2022-08-12T12:23:25Z")
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 🕶 ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 12, 2022, 2:49pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/12 "2022-08-12T14:49:00Z")
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](https://playground.babylonjs.com/#Q9VZS9%231016)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Thanks ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [August 12, 2022, 4:17pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/13 "2022-08-12T16:17:57Z")
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](https://playground.babylonjs.com/#Q9VZS9%231018)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Or else, use the ‘scene.registerBeforeRender’ function that runs any code at 60fps. ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 12, 2022, 4:42pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/14 "2022-08-12T16:42:51Z")
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](https://playground.babylonjs.com/#Q9VZS9%231019)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [August 12, 2022, 4:49pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/15 "2022-08-12T16:49:25Z")
> [@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 😃 ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [August 12, 2022, 7:34pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/16 "2022-08-12T19:34:11Z")
> [@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 ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 17, 2022, 9:29pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/17 "2022-08-17T21:29:37Z")
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 ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [August 17, 2022, 10:03pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/18 "2022-08-17T22:03:02Z")
> [@How to use onAnimationEnd](https://forum.babylonjs.com/t/how-to-use-onanimationend/2731/2): > > Hi @mecanicus \<- cool handle! slight_smile 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); … ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 18, 2022, 7:01pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/19 "2022-08-18T19:01:28Z")
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](https://playground.babylonjs.com/#Q9VZS9%231024)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Thanks a lot ---
**Author:** ![jade](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jade/32/26291_2.png) [@jade](https://forum.babylonjs.com/u/jade)\ **Post date:** [August 19, 2022, 4:50pm UTC](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955/20 "2022-08-19T16:50:22Z")
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)](https://playground.babylonjs.com/#Q9VZS9#1026) [Next page](https://forum.babylonjs.com/t/moving-from-threejs-to-babylonjs/32955.md?page=2)