This large document has been pieced-together by a chap called Wingnut (in Dec 2013) who is not affiliated with babylon.js or its developers. Mistakes likely! Not guaranteed fresh beyond Dec 2013! This document/package was made primarily for off-line use, and its (re)publishing rights likely fall under the same copyright rules/policies as the original documents and their owners/authors.
In this section, we are going to create a basic 3D scene with BabylonJS.
You can develop this scene very easily in a few simple steps.
Before you start, be sure to have a WebGL compatible browser.
First of all, create a basic HTML5 web page:
TIP: If you are copy'n'pasting, clicking in the gray areas and then pressing control-a... is a great way to highlight all the text including the leading tabs for proper indenting (then press control-c to copy). Careful. Control-x will temporarily erase the highlighted text, but a control-z or page reload... brings it back.
Then add a canvas element to the scene and a bit of CSS. This canvas is an HTML5 element, which will be used to draw our scene.
Here we put our CSS to view the canvas in maximum size:
Now we have an empty web page, ready to display 3D!
The JS part begins with 'including' (importing) the Babylon source files (the framework) within the <head> element of our HTML 5 document:
(If you don't already have those files, you can find them online... here: https://github.com/BabylonJS/Babylon.js, and here: http://handjs.codeplex.com/)
Careful! The newest version of babylon.js and handjs.js might have version numbers in their names. Be sure to rename them once downloaded, or adjust the SRC names (and possibly paths) used in your two <script> elements that you used within the <head> of your document.
Then finally, at the end of our web page (AFTER </body>), load the engine and create your 'scene'! A 'scene' is composed of:
Loading the engine... here we go! (the part put after the HTML </body> element, which is included here to show positioning)