Yeoman BabylonJS Generator

[Mimetis]

Today I want to share with you a new project I work on those days. 

 

The idea is to bring you a new tool to generate code for BabylonJS

 

Imagine you want to create a quick project with BabylonJS. You have to create a project, reference BabylonJS, create a simple scene, add assets and so on.

It’s straightforward, but we can do better…

 

BabylonJS Generator is a npm package based on Yeoman to provide you a simple way to create a BabylonJS project, hosted on node.js

 

Yeoman generator is already used with a lot of project (angular, webapp, wordpress, asp.net, office addins and so on …)

Check the generators here : http://yeoman.io/generators/

 

Installation

 

First, install Yeoman and generator-babylonjs using npm (we assume you have pre-installed node.js).

 

This step has to be done only one time. The “-g” argument will install those packages globally to your computer.

npm install -g yonpm install -g generator-babylonjs

From now, you can generate your new project with this simple command :

yo babylonjs

Actually you can choose the title, creating or not a folder for you solution and then choose the node.js port.

Once the generator is done, you can open your project with your favorite IDE  (Visual Studio Code for me ):

You will have a complete project based on :

1. Node.js for the server side
2. Jade for the client template engine (well to be honest, we just need a canvas element )
3. Express for the routing / middleware engine.
4. BabylonJS (obviously !) for the 3D JavaScript engine.

All the required JavaScript code is located in the /public/scripts/index.js file.

From now, you can hit F5 (on VS Code) or just run node :

node app.js

And we’re done !

Playground option : --playground [#identifier]

here is an other interesting option : If you found a cool scene from the playground, you can generate the full code with the playground scene identifier :

 

Imagine this playground sample : http://www.babylonjs-playground.com/#11OYNB#12

 

 

Would it be cool to generate the full project based on this sample ?

Well, just add the argument –playground to your command line to generate the full playground sample code :

yo babylonjs --playground #11OYNB#12

With this option, all the code is downloaded from the playground and then injected in the index.js file :

 

 

Like we’ve done before, just hit F5 or run node

node app.js

and we’re done (again ) !

 

 

Cool ?

[GameMonetize]

Cool!

[RaananW]

Really cool! 

 

And one extra plus - I was looking for a run command in VS code for a long time... F5! So easy, so simple...