Jump to content

Yeoman BabylonJS Generator


Mimetis
 Share

Recommended Posts

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

4744.image_5F00_271F138D.png

 
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 3531.wlEmoticon_2D00_smile_5F00_1712D587)
  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 !

5468.image_5F00_4493F54A.png

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 ? 3531.wlEmoticon_2D00_smile_5F00_1712D587

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 :

 

3377.image_5F00_5A4B72E5.png

 

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

node app.js

and we’re done (again 3531.wlEmoticon_2D00_smile_5F00_1712D587 ) !

 

2465.image_5F00_thumb_5F00_2D1D2AE9.png

 

Cool ? 3531.wlEmoticon_2D00_smile_5F00_1712D587

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...