Jelajahi Sumber

Replace with code from getting started

Trevor Baron 7 tahun lalu
induk
melakukan
f7320144ed
1 mengubah file dengan 32 tambahan dan 31 penghapusan
  1. 32 31
      readme.md

+ 32 - 31
readme.md

@@ -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).