|
@@ -58,43 +58,44 @@ If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json
|
|
|
To add a module install the respected package. A list of extra packages and their installation instructions can be found on [babylonjs' user at npm](https://www.npmjs.com/~babylonjs).
|
|
|
|
|
|
## Usage
|
|
|
-#### Import the library
|
|
|
-Using an HTML file:
|
|
|
-```
|
|
|
-<script src="https://cdn.babylonjs.com/babylon.js"></script>
|
|
|
-```
|
|
|
-Or in Javascript/Typescript using a bundler such as [Webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/):
|
|
|
-```
|
|
|
-import * as BABYLON from 'babylonjs';
|
|
|
-```
|
|
|
-#### Add a script
|
|
|
+See [Getting Started](http://doc.babylonjs.com/#getting-started)
|
|
|
```javascript
|
|
|
-// Create canvas html element on webpage
|
|
|
-var canvas = document.createElement('canvas');;
|
|
|
-document.body.appendChild(canvas);
|
|
|
-
|
|
|
-// Initialize Babylon scene and engine
|
|
|
+// get the canvas DOM element
|
|
|
+var canvas = document.getElementById('renderCanvas');
|
|
|
+// load the 3D engine
|
|
|
var engine = new BABYLON.Engine(canvas, true);
|
|
|
-var scene = new BABYLON.Scene(engine);
|
|
|
-engine.runRenderLoop(()=>{
|
|
|
+// createScene function that creates and return the scene
|
|
|
+var createScene = function(){
|
|
|
+ // create a basic BJS Scene object
|
|
|
+ var scene = new BABYLON.Scene(engine);
|
|
|
+ // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
|
|
|
+ var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
|
|
|
+ // target the camera to scene origin
|
|
|
+ camera.setTarget(BABYLON.Vector3.Zero());
|
|
|
+ // attach the camera to the canvas
|
|
|
+ camera.attachControl(canvas, false);
|
|
|
+ // create a basic light, aiming 0,1,0 - meaning, to the sky
|
|
|
+ var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
|
|
|
+ // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
|
|
|
+ var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
|
|
|
+ // move the sphere upward 1/2 of its height
|
|
|
+ sphere.position.y = 1;
|
|
|
+ // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
|
|
|
+ var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
|
|
|
+ // return the created scene
|
|
|
+ return scene;
|
|
|
+}
|
|
|
+// call the createScene function
|
|
|
+var scene = createScene();
|
|
|
+// run the render loop
|
|
|
+engine.runRenderLoop(function(){
|
|
|
scene.render();
|
|
|
});
|
|
|
-
|
|
|
-// Create objects in the scene
|
|
|
-var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, 0), scene);
|
|
|
-camera.attachControl(canvas,true)
|
|
|
-var light = new BABYLON.PointLight("light", new BABYLON.Vector3(10,10,0), scene);
|
|
|
-var box = BABYLON.Mesh.CreateBox("box", 1.0, scene);
|
|
|
-box.position.z = 5;
|
|
|
-
|
|
|
-// Run's once per game frame
|
|
|
-scene.onBeforeRenderObservable.add(()=>{
|
|
|
- box.position.x += 0.01;
|
|
|
- box.rotation.x += 0.01;
|
|
|
- box.rotation.y += 0.01;
|
|
|
+// the canvas/window resize event handler
|
|
|
+window.addEventListener('resize', function(){
|
|
|
+ engine.resize();
|
|
|
});
|
|
|
```
|
|
|
-
|
|
|
## Preview release
|
|
|
|
|
|
Preview version of **3.2** can be found [here](https://github.com/BabylonJS/Babylon.js/tree/master/dist/preview%20release).
|