Add 'usage' part of the readme (#38)

index.html

@@ -687,8 +687,6 @@
       }
 
       addCylinder({ position: { x: -4, y: 2, z: -3.5 } });
-      // addTrimesh()
-      // addHeightfield()
 
       function updateMeshPositions() {
         if (raycastVehicle) {
@@ -753,11 +751,11 @@
       engine.runRenderLoop(function () {
         world.fixedStep();
 
-        scene.render();
-
         cannonDebugger.update();
 
         updateMeshPositions();
+
+        scene.render();
       });
     </script>
   </body>

package.json

@@ -14,6 +14,7 @@
     "Cody Persinger <[email protected]> (https://github.com/codynova)",
     "Marco Fugaro <[email protected]> (https://github.com/marcofugaro)"
   ],
+  "homepage": "https://github.com/neu5/cannon-es-debugger-babylonjs#readme",
   "repository": {
     "type": "git",
     "url": "https://github.com/neu5/cannon-es-debugger-babylonjs.git"
@@ -34,6 +35,9 @@
     "@babylonjs/core": "^5.24.0",
     "cannon-es": "^0.20.0"
   },
+  "engines": {
+    "node": "^16.13"
+  },
   "type": "module",
   "devDependencies": {
     "@babel/core": "^7.16.5",

readme.md

@@ -18,7 +18,34 @@ Make sure you also have `@babylonjs/core` and `cannon-es` installed.
 
 ## Usage
 
-Tbd
+To make it work in your BabylonJS + cannon-es project you need these three steps:
+
+1. import the `CannonDebugger` from the installed package
+
+```javascript
+import CannonDebugger from "cannon-es-debugger-babylonjs";
+```
+
+2. initialise the cannonDebugger passing the `scene` and the `physicalWorld`
+
+```javascript
+const cannonDebugger = new CannonDebugger(scene, physicalWorld);
+```
+
+3. update the cannonDebugger inside of your render loop
+
+```javascript
+engine.runRenderLoop(function () {
+  // make the next step with the physicalWorld
+  physicalWorld.fixedStep();
+  // update debugger
+  cannonDebugger.update();
+  // possibly you want to update your meshses positions
+  updateMeshPositions();
+  // render the scene
+  scene.render();
+});
+```
 
 ## Credits
 
@@ -27,17 +54,23 @@ This is a debugger inspired by https://github.com/pmndrs/cannon-es-debugger whic
 ### Development
 
 First install all the dependencies by running
+
 ```
 yarn
 ```
+
 or `npm install`
 
-Next create developers build with watcher by running
+Next create developer's build with watcher by running
+
 ```
 yarn dev
 ```
+
 and in another terminal window start serving the application with
+
 ```
 yarn start
 ```
+
 This will show you the `index.html` at the `localhost:3000`