WhitestormJS · hirako2000 · Jun 23, 2017 · Jun 22, 2017 · Jun 22, 2017 · Jun 22, 2017
diff --git a/docs/data/Animation Clips.md b/docs/data/Animation Clips.md
@@ -0,0 +1,78 @@
+# Animation Clips
+
+The Animation Module provides a convenient approach to animate your models.
+Three.js provides an animation system, but you would need to setup the animation mixer, actions, and clips for your  models.
+With the `AnimationModule`, a few lines of code is enough to get going with playing various loops your models might have.
+
+### Pipeline
+
+A simple pipeline with Blender to get animated models on the browser:
+
+#### Blender
+- Model your mesh
+
+Modeling your mesh first, here is the model used in the Alien animation example.
+
+![Modeling](images/animation-clips/alien-model.png "Modeling")
+
+- Add bones
+
+Then add bones to form the armature of the model for animation.
+
+![Bones](images/animation-clips/alien-bones.png "Bones")
+
+- Weight assign (Skin/Rig)
+
+Assign weight to vertices for the bones to influence.
+
+![Weights](images/animation-clips/alien-weights-to-bones.png "weights")
+
+- Add animation frames
+
+Create frames to start animating, here using animation frames.
+Use the dope sheet/actions editor.
+
+![Frames](images/animation-clips/alien-add-frames.png "frames")
+
+- Animation names
+
+Your model might have multiple animations (actions/clips), here is the given name for the single animation created for this model.
+
+![Action name](images/animation-clips/alien-animation-name.png "action name")
+
+- Export
+
+Finally, export to three.js json format, use the Blender exporter plugin, and ticket the appropriate options.
+
+![Export](images/animation-clips/alien-export.png "Export")
+
+
+#### Whitestorm
+- Create the animation module, passing your `app` as parameter.
+
+```js
+const animationModule = new AnimationModule(app);
+```
+
+- Import your model as a SkinnedMesh, then play your clip
+
+```js
+new Importer({
+  parser(geometry, materials) {
+    return new THREE.SkinnedMesh(geometry, materials);
+  },
+
+  url: `path/to/model.json`,
+  useCustomMaterial: true,
+
+  material: new THREE.MeshStandardMaterial({
+    skinning: true
+  }),
+
+  modules: [animationModule]
+}).addTo(app).then(() => {
+  animationModule.play('clipName');
+});
+```
+
+That's it. The clip will kick off after the model is loaded, playing the given clip name.
diff --git a/docs/template/static/images/animation-clips/alien-add-frames.png b/docs/template/static/images/animation-clips/alien-add-frames.png
diff --git a/docs/template/static/images/animation-clips/alien-animation-name.png b/docs/template/static/images/animation-clips/alien-animation-name.png
diff --git a/docs/template/static/images/animation-clips/alien-bones.png b/docs/template/static/images/animation-clips/alien-bones.png
diff --git a/docs/template/static/images/animation-clips/alien-export.png b/docs/template/static/images/animation-clips/alien-export.png
diff --git a/docs/template/static/images/animation-clips/alien-model.png b/docs/template/static/images/animation-clips/alien-model.png
diff --git a/docs/template/static/images/animation-clips/alien-weights-to-bones.png b/docs/template/static/images/animation-clips/alien-weights-to-bones.png
diff --git a/src/components/meshes/Lathe.js b/src/components/meshes/Lathe.js
@@ -14,7 +14,7 @@ import {MeshComponent} from '../../core/MeshComponent';
  * In 3D computer graphics, a lathed object is a 3D model whose vertex geometry is produced by rotating the points of a spline or other point set around a fixed axis.
  * The lathing may be partial; the amount of rotation is not necessarily a full 360 degrees.
  * The point set providing the initial source data can be thought of as a cross section through the object along a plane containing its axis of radial symmetry. <br/><br/>
- * The <a href='http://threejs.org/docs/scenes/geometry-browser.html#LatheGeometry'>following example</a> shows a geometry which can be generated using WHS.Lathe class.
+ * The <a href='http://threejs.org/docs/scenes/geometry-browser.html#LatheGeometry'>following example</a> shows a geometry which can be generated using `Lathe` class.
  * @param {Object} [params] - The params.
  * @extends MeshComponent
  * @memberof module:components/meshes

diff --git a/src/components/meshes/Sphere.js b/src/components/meshes/Sphere.js
@@ -6,7 +6,47 @@ import {
 
 import {MeshComponent} from '../../core/MeshComponent';
 
+/**
+ * @class Sphere
+ * @category components/meshes
+ * @description Sphere class is used to create sphere objects by its radius property and other values that determines its detality.
+ * <br/><br/>
+ * It is similar to THREE.SphereGeometry, but it also contains all `Shape` properties, such as material, mass and vectors like position (pos) and rotation (rot).
+ * <br/><br/>
+ * Then it creates an `Three.js mesh` or a `Physijs mesh`, that is similar to `Three.js mesh`, but it also take into consideration collision calculations.
+ * This mesh is a combination of `Three.js geometry` and `Physijs material` (The same as in three.js, but with friction and restitution).
+ * @param {Object} [params] - The params.
+ * @extends MeshComponent
+ * @memberof module:components/meshes
+ * @example <caption>Creating a Sphere, and adding it to app</caption>
+ * new Sphere({
+ *   geometry: {
+ *     radius: 2
+ *   },
+ *
+ *   material: new THREE.MeshBasicMaterial({
+ *     color: 0xffffff
+ *   }),
+ *
+ *   position: {
+ *     y: 100
+ *   }
+ * }).addTo(app);
+ */
 class Sphere extends MeshComponent {
+  /**
+   * Default values for parameters
+   * @member {Object} module:components/meshes.Sphere#defaults
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: {
+   *     radius: 1,
+   *     widthSegments: 8,
+   *     heightSegments: 6
+   * }
+   * </pre>
+   */
   static defaults = {
     ...MeshComponent.defaults,
     geometry: {
@@ -16,6 +56,16 @@ class Sphere extends MeshComponent {
     }
   };
 
+  /**
+   * Instructions
+   * @member {Object} module:components/meshes.Sphere#instructions
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: ['radius', 'widthSegments', 'heightSegments']
+   * }
+   * </pre>
+   */
   static instructions = {
     ...MeshComponent.instructions,
     geometry: ['radius', 'widthSegments', 'heightSegments']
@@ -35,16 +85,14 @@ class Sphere extends MeshComponent {
   }
 
   buildGeometry(params = {}) {
-    const GConstruct = params.buffer && !params.softbody ? SphereBufferGeometry : SphereGeometry;
+    const GConstruct = params.buffer ? SphereBufferGeometry : SphereGeometry;
 
     const geometry = new GConstruct(
       params.geometry.radius,
       params.geometry.widthSegments,
       params.geometry.heightSegments
     );
 
-    if (params.softbody) this.proccessSoftbodyGeometry(geometry);
-
     return geometry;
   }
 }

diff --git a/src/components/meshes/Tetrahedron.js b/src/components/meshes/Tetrahedron.js
@@ -6,19 +6,65 @@ import {
 
 import {MeshComponent} from '../../core/MeshComponent';
 
+/**
+ * @class Tetrahedron
+ * @category components/meshes
+ * @description In geometry, a tetrahedron is a polyhedron composed of four triangular faces, six straight edges, and four vertex corners.
+ * The tetrahedron is the simplest of all the ordinary convex polyhedra and the only one that has fewer than 5 faces.
+ * <br/><br/>
+ * `Tetrahedron` creates a Tetrahedron object by its `radius` and `detail`
+ * @param {Object} [params] - The params.
+ * @extends MeshComponent
+ * @memberof module:components/meshes
+ * @example <caption>Creating a Tetrahedron, and adding it to app</caption>
+ * new Tetrahedron({
+ *   geometry: {
+ *     radius: 2,
+ *     detail: 1
+ *   },
+ *
+ *   material: new THREE.MeshBasicMaterial({
+ *     color: 0xffffff
+ *   }),
+ *
+ *   position: {
+ *     x: 0,
+ *     y: 100,
+ *     z: 0
+ *   }
+ * }).addTo(app);
+ */
 class Tetrahedron extends MeshComponent {
+  /**
+   * Default values for parameters
+   * @member {Object} module:components/meshes.Tetrahedron#defaults
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: {
+   *     radius: 1,
+   *     detail: 0
+   * }
+   * </pre>
+   */
   static defaults = {
     ...MeshComponent.defaults,
     geometry: {
       radius: 1,
       detail: 0
-    },
-
-    physics: {
-      create: false
     }
   };
 
+  /**
+   * Instructions
+   * @member {Object} module:components/meshes.Tetrahedron#instructions
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: ['radius', 'detail']
+   * }
+   * </pre>
+   */
   static instructions = {
     ...MeshComponent.instructions,
     geometry: ['radius', 'detail']
@@ -43,7 +89,7 @@ class Tetrahedron extends MeshComponent {
   }
 
   buildGeometry(params = {}) {
-    const GConstruct = params.buffer && !params.softbody ? TetrahedronBufferGeometry : TetrahedronGeometry;
+    const GConstruct = params.buffer ? TetrahedronBufferGeometry : TetrahedronGeometry;
 
     return new GConstruct(
       params.geometry.radius,

diff --git a/src/components/meshes/Text.js b/src/components/meshes/Text.js
@@ -7,7 +7,62 @@ import {
 
 import {MeshComponent} from '../../core/MeshComponent';
 
+/**
+ * @class Text
+ * @category components/meshes
+ * @description Text class is made for creating 3D text objects.
+ * <br/><br/>
+ * Physics text object can be convex or concave. By default it's convex but you can also switch to concave.
+ * @param {Object} [params] - The params.
+ * @extends MeshComponent
+ * @memberof module:components/meshes
+ * @example <caption>Creating a Text, and adding it to app</caption>
+ * new Text({
+ *   geometry: {
+ *     text: 'hello world',
+ *     parameters: {
+ *       font: 'path/to/font.typeface.js',
+ *       size: 20,
+ *       height: 5,
+ *       curveSegments: 6
+ *     }
+ *   },
+ *
+ *   material: new THREE.MeshBasicMaterial({
+ *     color: 0xffffff
+ *   }),
+ *
+ *   position: {
+ *     x: -40,
+ *     y: 20,
+ *     z: 0
+ *   }
+ * }).addTo(app);
+ */
 class Text extends MeshComponent {
+  /**
+   * Default values for parameters
+   * @member {Object} module:components/meshes.Text#defaults
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: {
+   *     text: 'Hello World!',
+   *     loader: new FontLoader(),
+   *
+   *     parameters: {
+   *       size: 12,
+   *       height: 50,
+   *       curveSegments: 12,
+   *       font: new Font(),
+   *       bevelEnabled: false,
+   *       bevelThickness: 10,
+   *       bevelSize: 8
+   *     }
+   *   }
+   * }
+   * </pre>
+   */
   static defaults = {
     ...MeshComponent.defaults,
     geometry: {
@@ -26,9 +81,19 @@ class Text extends MeshComponent {
     }
   };
 
+  /**
+   * Instructions
+   * @member {Object} module:components/meshes.Text#instructions
+   * @static
+   * @default <pre>
+   * {
+   *   geometry: ['text', 'loader', 'parameters']
+   * }
+   * </pre>
+   */
   static instructions = {
     ...MeshComponent.instructions,
-    geometry: ['text', 'parameters']
+    geometry: ['text', 'loader', 'parameters']
   }
 
   constructor(params = {}) {