three-stdlib 2.16.0 → 2.16.1

package/animation/MMDPhysics.js

@@ -1,85 +1,165 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const THREE = require("three");
+import { Object3D, Vector3, Quaternion, Matrix4, Mesh, Euler, Bone, MeshBasicMaterial, Color, BoxGeometry, SphereGeometry, CylinderGeometry } from 'three';
+
+/**
+ * Dependencies
+ *  - Ammo.js https://github.com/kripken/ammo.js
+ *
+ * MMDPhysics calculates physics with Ammo(Bullet based JavaScript Physics engine)
+ * for MMD model loaded by MMDLoader.
+ *
+ * TODO
+ *  - Physics in Worker
+ */
+
+/* global Ammo */
+
 const MMDPhysics = (() => {
-  function MMDPhysics2(mesh, rigidBodyParams, constraintParams, params) {
-    if (typeof Ammo === "undefined") {
-      throw new Error("THREE.MMDPhysics: Import ammo.js https://github.com/kripken/ammo.js");
+  /**
+   * @param {THREE.SkinnedMesh} mesh
+   * @param {Array<Object>} rigidBodyParams
+   * @param {Array<Object>} (optional) constraintParams
+   * @param {Object} params - (optional)
+   * @param {Number} params.unitStep - Default is 1 / 65.
+   * @param {Integer} params.maxStepNum - Default is 3.
+   * @param {Vector3} params.gravity - Default is ( 0, - 9.8 * 10, 0 )
+   */
+  function MMDPhysics(mesh, rigidBodyParams, constraintParams, params) {
+    if (typeof Ammo === 'undefined') {
+      throw new Error('THREE.MMDPhysics: Import ammo.js https://github.com/kripken/ammo.js');
     }
+
     constraintParams = constraintParams || [];
     params = params || {};
     this.manager = new ResourceManager();
     this.mesh = mesh;
-    this.unitStep = params.unitStep !== void 0 ? params.unitStep : 1 / 65;
-    this.maxStepNum = params.maxStepNum !== void 0 ? params.maxStepNum : 3;
-    this.gravity = new THREE.Vector3(0, -9.8 * 10, 0);
-    if (params.gravity !== void 0)
-      this.gravity.copy(params.gravity);
-    this.world = params.world !== void 0 ? params.world : null;
+    /*
+     * I don't know why but 1/60 unitStep easily breaks models
+     * so I set it 1/65 so far.
+     * Don't set too small unitStep because
+     * the smaller unitStep can make the performance worse.
+     */
+
+    this.unitStep = params.unitStep !== undefined ? params.unitStep : 1 / 65;
+    this.maxStepNum = params.maxStepNum !== undefined ? params.maxStepNum : 3;
+    this.gravity = new Vector3(0, -9.8 * 10, 0);
+    if (params.gravity !== undefined) this.gravity.copy(params.gravity);
+    this.world = params.world !== undefined ? params.world : null; // experimental
+
     this.bodies = [];
     this.constraints = [];
+
     this._init(mesh, rigidBodyParams, constraintParams);
   }
-  MMDPhysics2.prototype = {
-    constructor: MMDPhysics2,
-    update: function(delta) {
+
+  MMDPhysics.prototype = {
+    constructor: MMDPhysics,
+
+    /**
+     * Advances Physics calculation and updates bones.
+     *
+     * @param {Number} delta - time in second
+     * @return {MMDPhysics}
+     */
+    update: function (delta) {
       const manager = this.manager;
-      const mesh = this.mesh;
+      const mesh = this.mesh; // rigid bodies and constrains are for
+      // mesh's world scale (1, 1, 1).
+      // Convert to (1, 1, 1) if it isn't.
+
       let isNonDefaultScale = false;
       const position = manager.allocThreeVector3();
       const quaternion = manager.allocThreeQuaternion();
       const scale = manager.allocThreeVector3();
       mesh.matrixWorld.decompose(position, quaternion, scale);
+
       if (scale.x !== 1 || scale.y !== 1 || scale.z !== 1) {
         isNonDefaultScale = true;
       }
+
       let parent;
+
       if (isNonDefaultScale) {
         parent = mesh.parent;
-        if (parent !== null)
-          mesh.parent = null;
+        if (parent !== null) mesh.parent = null;
         scale.copy(this.mesh.scale);
         mesh.scale.set(1, 1, 1);
         mesh.updateMatrixWorld(true);
-      }
+      } // calculate physics and update bones
+
+
       this._updateRigidBodies();
+
       this._stepSimulation(delta);
-      this._updateBones();
+
+      this._updateBones(); // restore mesh if converted above
+
+
       if (isNonDefaultScale) {
-        if (parent !== null)
-          mesh.parent = parent;
+        if (parent !== null) mesh.parent = parent;
         mesh.scale.copy(scale);
       }
+
       manager.freeThreeVector3(scale);
       manager.freeThreeQuaternion(quaternion);
       manager.freeThreeVector3(position);
       return this;
     },
-    reset: function() {
+
+    /**
+     * Resets rigid bodies transorm to current bone's.
+     *
+     * @return {MMDPhysics}
+     */
+    reset: function () {
       for (let i = 0, il = this.bodies.length; i < il; i++) {
         this.bodies[i].reset();
       }
+
       return this;
     },
-    warmup: function(cycles) {
+
+    /**
+     * Warm ups Rigid bodies. Calculates cycles steps.
+     *
+     * @param {Integer} cycles
+     * @return {MMDPhysics}
+     */
+    warmup: function (cycles) {
       for (let i = 0; i < cycles; i++) {
         this.update(1 / 60);
       }
+
       return this;
     },
-    setGravity: function(gravity) {
+
+    /**
+     * Sets gravity.
+     *
+     * @param {Vector3} gravity
+     * @return {MMDPhysicsHelper}
+     */
+    setGravity: function (gravity) {
       this.world.setGravity(new Ammo.btVector3(gravity.x, gravity.y, gravity.z));
       this.gravity.copy(gravity);
       return this;
     },
-    createHelper: function() {
+
+    /**
+     * Creates MMDPhysicsHelper
+     *
+     * @return {MMDPhysicsHelper}
+     */
+    createHelper: function () {
       return new MMDPhysicsHelper(this.mesh, this);
     },
-    _init: function(mesh, rigidBodyParams, constraintParams) {
-      const manager = this.manager;
+    // private methods
+    _init: function (mesh, rigidBodyParams, constraintParams) {
+      const manager = this.manager; // rigid body/constraint parameters are for
+      // mesh's default world transform as position(0, 0, 0),
+      // quaternion(0, 0, 0, 1) and scale(0, 0, 0)
+
       let parent = mesh.parent;
-      if (parent !== null)
-        parent = null;
+      if (parent !== null) parent = null;
       const currentPosition = manager.allocThreeVector3();
       const currentQuaternion = manager.allocThreeQuaternion();
       const currentScale = manager.allocThreeVector3();
@@ -90,14 +170,17 @@ const MMDPhysics = (() => {
       mesh.quaternion.set(0, 0, 0, 1);
       mesh.scale.set(1, 1, 1);
       mesh.updateMatrixWorld(true);
+
       if (this.world === null) {
         this.world = this._createWorld();
         this.setGravity(this.gravity);
       }
+
       this._initRigidBodies(rigidBodyParams);
+
       this._initConstraints(constraintParams);
-      if (parent !== null)
-        mesh.parent = parent;
+
+      if (parent !== null) mesh.parent = parent;
       mesh.position.copy(currentPosition);
       mesh.quaternion.copy(currentQuaternion);
       mesh.scale.copy(currentScale);
@@ -107,7 +190,7 @@ const MMDPhysics = (() => {
       manager.freeThreeQuaternion(currentQuaternion);
       manager.freeThreeVector3(currentScale);
     },
-    _createWorld: function() {
+    _createWorld: function () {
       const config = new Ammo.btDefaultCollisionConfiguration();
       const dispatcher = new Ammo.btCollisionDispatcher(config);
       const cache = new Ammo.btDbvtBroadphase();
@@ -115,12 +198,12 @@ const MMDPhysics = (() => {
       const world = new Ammo.btDiscreteDynamicsWorld(dispatcher, cache, solver, config);
       return world;
     },
-    _initRigidBodies: function(rigidBodies) {
+    _initRigidBodies: function (rigidBodies) {
       for (let i = 0, il = rigidBodies.length; i < il; i++) {
         this.bodies.push(new RigidBody(this.mesh, this.world, rigidBodies[i], this.manager));
       }
     },
-    _initConstraints: function(constraints) {
+    _initConstraints: function (constraints) {
       for (let i = 0, il = constraints.length; i < il; i++) {
         const params = constraints[i];
         const bodyA = this.bodies[params.rigidBodyIndex1];
@@ -128,122 +211,138 @@ const MMDPhysics = (() => {
         this.constraints.push(new Constraint(this.mesh, this.world, bodyA, bodyB, params, this.manager));
       }
     },
-    _stepSimulation: function(delta) {
+    _stepSimulation: function (delta) {
       const unitStep = this.unitStep;
       let stepTime = delta;
       let maxStepNum = (delta / unitStep | 0) + 1;
+
       if (stepTime < unitStep) {
         stepTime = unitStep;
         maxStepNum = 1;
       }
+
       if (maxStepNum > this.maxStepNum) {
         maxStepNum = this.maxStepNum;
       }
+
       this.world.stepSimulation(stepTime, maxStepNum, unitStep);
     },
-    _updateRigidBodies: function() {
+    _updateRigidBodies: function () {
       for (let i = 0, il = this.bodies.length; i < il; i++) {
         this.bodies[i].updateFromBone();
       }
     },
-    _updateBones: function() {
+    _updateBones: function () {
       for (let i = 0, il = this.bodies.length; i < il; i++) {
         this.bodies[i].updateBone();
       }
     }
   };
+  /**
+   * This manager's responsibilies are
+   *
+   * 1. manage Ammo.js and Three.js object resources and
+   *    improve the performance and the memory consumption by
+   *    reusing objects.
+   *
+   * 2. provide simple Ammo object operations.
+   */
+
   function ResourceManager() {
+    // for Three.js
     this.threeVector3s = [];
     this.threeMatrix4s = [];
     this.threeQuaternions = [];
-    this.threeEulers = [];
+    this.threeEulers = []; // for Ammo.js
+
     this.transforms = [];
     this.quaternions = [];
     this.vector3s = [];
   }
+
   ResourceManager.prototype = {
     constructor: ResourceManager,
-    allocThreeVector3: function() {
-      return this.threeVector3s.length > 0 ? this.threeVector3s.pop() : new THREE.Vector3();
+    allocThreeVector3: function () {
+      return this.threeVector3s.length > 0 ? this.threeVector3s.pop() : new Vector3();
     },
-    freeThreeVector3: function(v) {
+    freeThreeVector3: function (v) {
       this.threeVector3s.push(v);
     },
-    allocThreeMatrix4: function() {
-      return this.threeMatrix4s.length > 0 ? this.threeMatrix4s.pop() : new THREE.Matrix4();
+    allocThreeMatrix4: function () {
+      return this.threeMatrix4s.length > 0 ? this.threeMatrix4s.pop() : new Matrix4();
     },
-    freeThreeMatrix4: function(m) {
+    freeThreeMatrix4: function (m) {
       this.threeMatrix4s.push(m);
     },
-    allocThreeQuaternion: function() {
-      return this.threeQuaternions.length > 0 ? this.threeQuaternions.pop() : new THREE.Quaternion();
+    allocThreeQuaternion: function () {
+      return this.threeQuaternions.length > 0 ? this.threeQuaternions.pop() : new Quaternion();
     },
-    freeThreeQuaternion: function(q) {
+    freeThreeQuaternion: function (q) {
       this.threeQuaternions.push(q);
     },
-    allocThreeEuler: function() {
-      return this.threeEulers.length > 0 ? this.threeEulers.pop() : new THREE.Euler();
+    allocThreeEuler: function () {
+      return this.threeEulers.length > 0 ? this.threeEulers.pop() : new Euler();
     },
-    freeThreeEuler: function(e) {
+    freeThreeEuler: function (e) {
       this.threeEulers.push(e);
     },
-    allocTransform: function() {
+    allocTransform: function () {
       return this.transforms.length > 0 ? this.transforms.pop() : new Ammo.btTransform();
     },
-    freeTransform: function(t) {
+    freeTransform: function (t) {
       this.transforms.push(t);
     },
-    allocQuaternion: function() {
+    allocQuaternion: function () {
       return this.quaternions.length > 0 ? this.quaternions.pop() : new Ammo.btQuaternion();
     },
-    freeQuaternion: function(q) {
+    freeQuaternion: function (q) {
       this.quaternions.push(q);
     },
-    allocVector3: function() {
+    allocVector3: function () {
       return this.vector3s.length > 0 ? this.vector3s.pop() : new Ammo.btVector3();
     },
-    freeVector3: function(v) {
+    freeVector3: function (v) {
       this.vector3s.push(v);
     },
-    setIdentity: function(t) {
+    setIdentity: function (t) {
       t.setIdentity();
     },
-    getBasis: function(t) {
+    getBasis: function (t) {
       const q = this.allocQuaternion();
       t.getBasis().getRotation(q);
       return q;
     },
-    getBasisAsMatrix3: function(t) {
+    getBasisAsMatrix3: function (t) {
       const q = this.getBasis(t);
       const m = this.quaternionToMatrix3(q);
       this.freeQuaternion(q);
       return m;
     },
-    getOrigin: function(t) {
+    getOrigin: function (t) {
       return t.getOrigin();
     },
-    setOrigin: function(t, v) {
+    setOrigin: function (t, v) {
       t.getOrigin().setValue(v.x(), v.y(), v.z());
     },
-    copyOrigin: function(t1, t2) {
+    copyOrigin: function (t1, t2) {
       const o = t2.getOrigin();
       this.setOrigin(t1, o);
     },
-    setBasis: function(t, q) {
+    setBasis: function (t, q) {
       t.setRotation(q);
     },
-    setBasisFromMatrix3: function(t, m) {
+    setBasisFromMatrix3: function (t, m) {
       const q = this.matrix3ToQuaternion(m);
       this.setBasis(t, q);
       this.freeQuaternion(q);
     },
-    setOriginFromArray3: function(t, a) {
+    setOriginFromArray3: function (t, a) {
       t.getOrigin().setValue(a[0], a[1], a[2]);
     },
-    setOriginFromThreeVector3: function(t, v) {
+    setOriginFromThreeVector3: function (t, v) {
       t.getOrigin().setValue(v.x, v.y, v.z);
     },
-    setBasisFromArray3: function(t, a) {
+    setBasisFromArray3: function (t, a) {
       const thQ = this.allocThreeQuaternion();
       const thE = this.allocThreeEuler();
       thE.set(a[0], a[1], a[2]);
@@ -251,7 +350,7 @@ const MMDPhysics = (() => {
       this.freeThreeEuler(thE);
       this.freeThreeQuaternion(thQ);
     },
-    setBasisFromThreeQuaternion: function(t, a) {
+    setBasisFromThreeQuaternion: function (t, a) {
       const q = this.allocQuaternion();
       q.setX(a.x);
       q.setY(a.y);
@@ -260,7 +359,7 @@ const MMDPhysics = (() => {
       this.setBasis(t, q);
       this.freeQuaternion(q);
     },
-    multiplyTransforms: function(t1, t2) {
+    multiplyTransforms: function (t1, t2) {
       const t = this.allocTransform();
       this.setIdentity(t);
       const m1 = this.getBasisAsMatrix3(t1);
@@ -276,7 +375,7 @@ const MMDPhysics = (() => {
       this.freeVector3(v2);
       return t;
     },
-    inverseTransform: function(t) {
+    inverseTransform: function (t) {
       const t2 = this.allocTransform();
       const m1 = this.getBasisAsMatrix3(t);
       const o = this.getOrigin(t);
@@ -289,7 +388,7 @@ const MMDPhysics = (() => {
       this.freeVector3(v2);
       return t2;
     },
-    multiplyMatrices3: function(m1, m2) {
+    multiplyMatrices3: function (m1, m2) {
       const m3 = [];
       const v10 = this.rowOfMatrix3(m1, 0);
       const v11 = this.rowOfMatrix3(m1, 1);
@@ -314,30 +413,30 @@ const MMDPhysics = (() => {
       this.freeVector3(v22);
       return m3;
     },
-    addVector3: function(v1, v2) {
+    addVector3: function (v1, v2) {
       const v = this.allocVector3();
       v.setValue(v1.x() + v2.x(), v1.y() + v2.y(), v1.z() + v2.z());
       return v;
     },
-    dotVectors3: function(v1, v2) {
+    dotVectors3: function (v1, v2) {
       return v1.x() * v2.x() + v1.y() * v2.y() + v1.z() * v2.z();
     },
-    rowOfMatrix3: function(m, i) {
+    rowOfMatrix3: function (m, i) {
       const v = this.allocVector3();
       v.setValue(m[i * 3 + 0], m[i * 3 + 1], m[i * 3 + 2]);
       return v;
     },
-    columnOfMatrix3: function(m, i) {
+    columnOfMatrix3: function (m, i) {
       const v = this.allocVector3();
       v.setValue(m[i + 0], m[i + 3], m[i + 6]);
       return v;
     },
-    negativeVector3: function(v) {
+    negativeVector3: function (v) {
       const v2 = this.allocVector3();
       v2.setValue(-v.x(), -v.y(), -v.z());
       return v2;
     },
-    multiplyMatrix3ByVector3: function(m, v) {
+    multiplyMatrix3ByVector3: function (m, v) {
       const v4 = this.allocVector3();
       const v0 = this.rowOfMatrix3(m, 0);
       const v1 = this.rowOfMatrix3(m, 1);
@@ -351,7 +450,7 @@ const MMDPhysics = (() => {
       this.freeVector3(v2);
       return v4;
     },
-    transposeMatrix3: function(m) {
+    transposeMatrix3: function (m) {
       const m2 = [];
       m2[0] = m[0];
       m2[1] = m[3];
@@ -364,7 +463,7 @@ const MMDPhysics = (() => {
       m2[8] = m[8];
       return m2;
     },
-    quaternionToMatrix3: function(q) {
+    quaternionToMatrix3: function (q) {
       const m = [];
       const x = q.x();
       const y = q.y();
@@ -390,34 +489,36 @@ const MMDPhysics = (() => {
       m[8] = 1 - 2 * (xx + yy);
       return m;
     },
-    matrix3ToQuaternion: function(m) {
+    matrix3ToQuaternion: function (m) {
       const t = m[0] + m[4] + m[8];
       let s, x, y, z, w;
+
       if (t > 0) {
-        s = Math.sqrt(t + 1) * 2;
+        s = Math.sqrt(t + 1.0) * 2;
         w = 0.25 * s;
         x = (m[7] - m[5]) / s;
         y = (m[2] - m[6]) / s;
         z = (m[3] - m[1]) / s;
       } else if (m[0] > m[4] && m[0] > m[8]) {
-        s = Math.sqrt(1 + m[0] - m[4] - m[8]) * 2;
+        s = Math.sqrt(1.0 + m[0] - m[4] - m[8]) * 2;
         w = (m[7] - m[5]) / s;
         x = 0.25 * s;
         y = (m[1] + m[3]) / s;
         z = (m[2] + m[6]) / s;
       } else if (m[4] > m[8]) {
-        s = Math.sqrt(1 + m[4] - m[0] - m[8]) * 2;
+        s = Math.sqrt(1.0 + m[4] - m[0] - m[8]) * 2;
         w = (m[2] - m[6]) / s;
         x = (m[1] + m[3]) / s;
         y = 0.25 * s;
         z = (m[5] + m[7]) / s;
       } else {
-        s = Math.sqrt(1 + m[8] - m[0] - m[4]) * 2;
+        s = Math.sqrt(1.0 + m[8] - m[0] - m[4]) * 2;
         w = (m[3] - m[1]) / s;
         x = (m[2] + m[6]) / s;
         y = (m[5] + m[7]) / s;
         z = 0.25 * s;
       }
+
       const q = this.allocQuaternion();
       q.setX(x);
       q.setY(y);
@@ -426,6 +527,13 @@ const MMDPhysics = (() => {
       return q;
     }
   };
+  /**
+   * @param {THREE.SkinnedMesh} mesh
+   * @param {Ammo.btDiscreteDynamicsWorld} world
+   * @param {Object} params
+   * @param {ResourceManager} manager
+   */
+
   function RigidBody(mesh, world, params, manager) {
     this.mesh = mesh;
     this.world = world;
@@ -435,58 +543,92 @@ const MMDPhysics = (() => {
     this.bone = null;
     this.boneOffsetForm = null;
     this.boneOffsetFormInverse = null;
+
     this._init();
   }
+
   RigidBody.prototype = {
-    constructor: MMDPhysics2.RigidBody,
-    reset: function() {
+    constructor: MMDPhysics.RigidBody,
+
+    /**
+     * Resets rigid body transform to the current bone's.
+     *
+     * @return {RigidBody}
+     */
+    reset: function () {
       this._setTransformFromBone();
+
       return this;
     },
-    updateFromBone: function() {
+
+    /**
+     * Updates rigid body's transform from the current bone.
+     *
+     * @return {RidigBody}
+     */
+    updateFromBone: function () {
       if (this.params.boneIndex !== -1 && this.params.type === 0) {
         this._setTransformFromBone();
       }
+
       return this;
     },
-    updateBone: function() {
+
+    /**
+     * Updates bone from the current ridid body's transform.
+     *
+     * @return {RidigBody}
+     */
+    updateBone: function () {
       if (this.params.type === 0 || this.params.boneIndex === -1) {
         return this;
       }
+
       this._updateBoneRotation();
+
       if (this.params.type === 1) {
         this._updateBonePosition();
       }
+
       this.bone.updateMatrixWorld(true);
+
       if (this.params.type === 2) {
         this._setPositionFromBone();
       }
+
       return this;
     },
-    _init: function() {
+    // private methods
+    _init: function () {
       function generateShape(p) {
         switch (p.shapeType) {
           case 0:
             return new Ammo.btSphereShape(p.width);
+
           case 1:
             return new Ammo.btBoxShape(new Ammo.btVector3(p.width, p.height, p.depth));
+
           case 2:
             return new Ammo.btCapsuleShape(p.width, p.height);
+
           default:
             throw `unknown shape type ${p.shapeType}`;
         }
       }
+
       const manager = this.manager;
       const params = this.params;
       const bones = this.mesh.skeleton.bones;
-      const bone = params.boneIndex === -1 ? new THREE.Bone() : bones[params.boneIndex];
+      const bone = params.boneIndex === -1 ? new Bone() : bones[params.boneIndex];
       const shape = generateShape(params);
       const weight = params.type === 0 ? 0 : params.weight;
       const localInertia = manager.allocVector3();
       localInertia.setValue(0, 0, 0);
+
       if (weight !== 0) {
         shape.calculateLocalInertia(weight, localInertia);
       }
+
       const boneOffsetForm = manager.allocTransform();
       manager.setIdentity(boneOffsetForm);
       manager.setOriginFromArray3(boneOffsetForm, params.position);
@@ -501,10 +643,18 @@ const MMDPhysics = (() => {
       info.set_m_friction(params.friction);
       info.set_m_restitution(params.restitution);
       const body = new Ammo.btRigidBody(info);
+
       if (params.type === 0) {
         body.setCollisionFlags(body.getCollisionFlags() | 2);
+        /*
+         * It'd be better to comment out this line though in general I should call this method
+         * because I'm not sure why but physics will be more like MMD's
+         * if I comment out.
+         */
+
         body.setActivationState(4);
       }
+
       body.setDamping(params.positionDamping, params.rotationDamping);
       body.setSleepingThresholds(0, 0);
       this.world.addRigidBody(body, 1 << params.groupIndex, params.groupTarget);
@@ -517,7 +667,7 @@ const MMDPhysics = (() => {
       manager.freeTransform(boneForm);
       manager.freeThreeVector3(vector);
     },
-    _getBoneTransform: function() {
+    _getBoneTransform: function () {
       const manager = this.manager;
       const p = manager.allocThreeVector3();
       const q = manager.allocThreeQuaternion();
@@ -533,32 +683,42 @@ const MMDPhysics = (() => {
       manager.freeThreeVector3(p);
       return form;
     },
-    _getWorldTransformForBone: function() {
+    _getWorldTransformForBone: function () {
       const manager = this.manager;
       const tr = this.body.getCenterOfMassTransform();
       return manager.multiplyTransforms(tr, this.boneOffsetFormInverse);
     },
-    _setTransformFromBone: function() {
+    _setTransformFromBone: function () {
       const manager = this.manager;
-      const form = this._getBoneTransform();
+
+      const form = this._getBoneTransform(); // TODO: check the most appropriate way to set
+      //this.body.setWorldTransform( form );
+
+
       this.body.setCenterOfMassTransform(form);
       this.body.getMotionState().setWorldTransform(form);
       manager.freeTransform(form);
     },
-    _setPositionFromBone: function() {
+    _setPositionFromBone: function () {
       const manager = this.manager;
+
       const form = this._getBoneTransform();
+
       const tr = manager.allocTransform();
       this.body.getMotionState().getWorldTransform(tr);
-      manager.copyOrigin(tr, form);
+      manager.copyOrigin(tr, form); // TODO: check the most appropriate way to set
+      //this.body.setWorldTransform( tr );
+
       this.body.setCenterOfMassTransform(tr);
       this.body.getMotionState().setWorldTransform(tr);
       manager.freeTransform(tr);
       manager.freeTransform(form);
     },
-    _updateBoneRotation: function() {
+    _updateBoneRotation: function () {
       const manager = this.manager;
+
       const tr = this._getWorldTransformForBone();
+
       const q = manager.getBasis(tr);
       const thQ = manager.allocThreeQuaternion();
       const thQ2 = manager.allocThreeQuaternion();
@@ -566,8 +726,12 @@ const MMDPhysics = (() => {
       thQ.set(q.x(), q.y(), q.z(), q.w());
       thQ2.setFromRotationMatrix(this.bone.matrixWorld);
       thQ2.conjugate();
-      thQ2.multiply(thQ);
-      thQ3.setFromRotationMatrix(this.bone.matrix);
+      thQ2.multiply(thQ); //this.bone.quaternion.multiply( thQ2 );
+
+      thQ3.setFromRotationMatrix(this.bone.matrix); // Renormalizing quaternion here because repeatedly transforming
+      // quaternion continuously accumulates floating point error and
+      // can end up being overflow. See #15335
+
       this.bone.quaternion.copy(thQ2.multiply(thQ3).normalize());
       manager.freeThreeQuaternion(thQ);
       manager.freeThreeQuaternion(thQ2);
@@ -575,20 +739,33 @@ const MMDPhysics = (() => {
       manager.freeQuaternion(q);
       manager.freeTransform(tr);
     },
-    _updateBonePosition: function() {
+    _updateBonePosition: function () {
       const manager = this.manager;
+
       const tr = this._getWorldTransformForBone();
+
       const thV = manager.allocThreeVector3();
       const o = manager.getOrigin(tr);
       thV.set(o.x(), o.y(), o.z());
+
       if (this.bone.parent) {
         this.bone.parent.worldToLocal(thV);
       }
+
       this.bone.position.copy(thV);
       manager.freeThreeVector3(thV);
       manager.freeTransform(tr);
     }
   };
+  /**
+   * @param {THREE.SkinnedMesh} mesh
+   * @param {Ammo.btDiscreteDynamicsWorld} world
+   * @param {RigidBody} bodyA
+   * @param {RigidBody} bodyB
+   * @param {Object} params
+   * @param {ResourceManager} manager
+   */
+
   function Constraint(mesh, world, bodyA, bodyB, params, manager) {
     this.mesh = mesh;
     this.world = world;
@@ -597,11 +774,14 @@ const MMDPhysics = (() => {
     this.params = params;
     this.manager = manager;
     this.constraint = null;
+
     this._init();
   }
+
   Constraint.prototype = {
     constructor: Constraint,
-    _init: function() {
+    // private method
+    _init: function () {
       const manager = this.manager;
       const params = this.params;
       const bodyA = this.bodyA;
@@ -631,23 +811,35 @@ const MMDPhysics = (() => {
       constraint.setLinearUpperLimit(lul);
       constraint.setAngularLowerLimit(all);
       constraint.setAngularUpperLimit(aul);
+
       for (let i = 0; i < 3; i++) {
         if (params.springPosition[i] !== 0) {
           constraint.enableSpring(i, true);
           constraint.setStiffness(i, params.springPosition[i]);
         }
       }
+
       for (let i = 0; i < 3; i++) {
         if (params.springRotation[i] !== 0) {
           constraint.enableSpring(i + 3, true);
           constraint.setStiffness(i + 3, params.springRotation[i]);
         }
       }
-      if (constraint.setParam !== void 0) {
+      /*
+       * Currently(10/31/2016) official ammo.js doesn't support
+       * btGeneric6DofSpringConstraint.setParam method.
+       * You need custom ammo.js (add the method into idl) if you wanna use.
+       * By setting this parameter, physics will be more like MMD's
+       */
+
+
+      if (constraint.setParam !== undefined) {
         for (let i = 0; i < 6; i++) {
+          // this parameter is from http://www20.atpages.jp/katwat/three.js_r58/examples/mytest37/mmd.three.js
           constraint.setParam(2, 0.475, i);
         }
       }
+
       this.world.addConstraint(constraint, true);
       this.constraint = constraint;
       manager.freeTransform(form);
@@ -663,57 +855,66 @@ const MMDPhysics = (() => {
       manager.freeVector3(aul);
     }
   };
+  /**
+   * Visualize Rigid bodies
+   *
+   * @param {THREE.SkinnedMesh} mesh
+   * @param {Physics} physics
+   */
+
   function MMDPhysicsHelper(mesh, physics) {
-    THREE.Object3D.call(this);
+    Object3D.call(this);
     this.root = mesh;
     this.physics = physics;
     this.matrix.copy(mesh.matrixWorld);
     this.matrixAutoUpdate = false;
     this.materials = [];
-    this.materials.push(
-      new THREE.MeshBasicMaterial({
-        color: new THREE.Color(16746632),
-        wireframe: true,
-        depthTest: false,
-        depthWrite: false,
-        opacity: 0.25,
-        transparent: true
-      })
-    );
-    this.materials.push(
-      new THREE.MeshBasicMaterial({
-        color: new THREE.Color(8978312),
-        wireframe: true,
-        depthTest: false,
-        depthWrite: false,
-        opacity: 0.25,
-        transparent: true
-      })
-    );
-    this.materials.push(
-      new THREE.MeshBasicMaterial({
-        color: new THREE.Color(8947967),
-        wireframe: true,
-        depthTest: false,
-        depthWrite: false,
-        opacity: 0.25,
-        transparent: true
-      })
-    );
+    this.materials.push(new MeshBasicMaterial({
+      color: new Color(0xff8888),
+      wireframe: true,
+      depthTest: false,
+      depthWrite: false,
+      opacity: 0.25,
+      transparent: true
+    }));
+    this.materials.push(new MeshBasicMaterial({
+      color: new Color(0x88ff88),
+      wireframe: true,
+      depthTest: false,
+      depthWrite: false,
+      opacity: 0.25,
+      transparent: true
+    }));
+    this.materials.push(new MeshBasicMaterial({
+      color: new Color(0x8888ff),
+      wireframe: true,
+      depthTest: false,
+      depthWrite: false,
+      opacity: 0.25,
+      transparent: true
+    }));
+
     this._init();
   }
-  MMDPhysicsHelper.prototype = Object.assign(Object.create(THREE.Object3D.prototype), {
+
+  MMDPhysicsHelper.prototype = Object.assign(Object.create(Object3D.prototype), {
     constructor: MMDPhysicsHelper,
+
+    /**
+     * Updates Rigid Bodies visualization.
+     */
     updateMatrixWorld: (() => {
-      const position = new THREE.Vector3();
-      const quaternion = new THREE.Quaternion();
-      const scale = new THREE.Vector3();
-      const matrixWorldInv = new THREE.Matrix4();
+      const position = new Vector3();
+      const quaternion = new Quaternion();
+      const scale = new Vector3();
+      const matrixWorldInv = new Matrix4();
       return function updateMatrixWorld(force) {
         const mesh = this.root;
+
         if (this.visible) {
           const bodies = this.physics.bodies;
           matrixWorldInv.copy(mesh.matrixWorld).decompose(position, quaternion, scale).compose(position, quaternion, scale.set(1, 1, 1)).invert();
+
           for (let i = 0, il = bodies.length; i < il; i++) {
             const body = bodies[i].body;
             const child = this.children[i];
@@ -724,32 +925,36 @@ const MMDPhysics = (() => {
             child.quaternion.setFromRotationMatrix(matrixWorldInv).multiply(quaternion.set(rotation.x(), rotation.y(), rotation.z(), rotation.w()));
           }
         }
+
         this.matrix.copy(mesh.matrixWorld).decompose(position, quaternion, scale).compose(position, quaternion, scale.set(1, 1, 1));
-        THREE.Object3D.prototype.updateMatrixWorld.call(this, force);
+        Object3D.prototype.updateMatrixWorld.call(this, force);
       };
     })(),
-    _init: function() {
+    // private method
+    _init: function () {
       const bodies = this.physics.bodies;
+
       function createGeometry(param) {
         switch (param.shapeType) {
           case 0:
-            return new THREE.SphereGeometry(param.width, 16, 8);
+            return new SphereGeometry(param.width, 16, 8);
+
           case 1:
-            return new THREE.BoxGeometry(param.width * 2, param.height * 2, param.depth * 2, 8, 8, 8);
+            return new BoxGeometry(param.width * 2, param.height * 2, param.depth * 2, 8, 8, 8);
+
           case 2:
             return new createCapsuleGeometry(param.width, param.height, 16, 8);
+
           default:
             return null;
         }
-      }
+      } // copy from http://www20.atpages.jp/katwat/three.js_r58/examples/mytest37/mytest37.js?ver=20160815
+
+
       function createCapsuleGeometry(radius, cylinderHeight, segmentsRadius, segmentsHeight) {
-        const geometry = new THREE.CylinderGeometry(radius, radius, cylinderHeight, segmentsRadius, segmentsHeight, true);
-        const upperSphere = new THREE.Mesh(
-          new THREE.SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, 0, Math.PI / 2)
-        );
-        const lowerSphere = new THREE.Mesh(
-          new THREE.SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2)
-        );
+        const geometry = new CylinderGeometry(radius, radius, cylinderHeight, segmentsRadius, segmentsHeight, true);
+        const upperSphere = new Mesh(new SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, 0, Math.PI / 2));
+        const lowerSphere = new Mesh(new SphereGeometry(radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2));
         upperSphere.position.set(0, cylinderHeight / 2, 0);
         lowerSphere.position.set(0, -cylinderHeight / 2, 0);
         upperSphere.updateMatrix();
@@ -758,12 +963,14 @@ const MMDPhysics = (() => {
         geometry.merge(lowerSphere.geometry, lowerSphere.matrix);
         return geometry;
       }
+
       for (let i = 0, il = bodies.length; i < il; i++) {
         const param = bodies[i].params;
-        this.add(new THREE.Mesh(createGeometry(param), this.materials[param.type]));
+        this.add(new Mesh(createGeometry(param), this.materials[param.type]));
       }
     }
   });
-  return MMDPhysics2;
+  return MMDPhysics;
 })();
-exports.MMDPhysics = MMDPhysics;
+
+export { MMDPhysics };