wip(oimo): space-system 'n space-object with universal gravity

examples/App.vue

@@ -28,10 +28,14 @@
         </movement-object>
       </movement-system>
 
-      <oimo-world :options="{ gravity: [0, 2, 0] }">
-        <oimo-body v-for="t in textures" :key="t" :options="{ move: true }">
-          <cube :texture="t" :size="1"></cube>
-        </oimo-body>
+      <oimo-world :options="{ gravity: [0, 1, 0] }">
+        <space-system :m-scale="10 ** 4">
+          <space-object v-for="t in textures" :key="t">
+            <oimo-body :options="{ move: true, density: 1 }">
+              <cube :texture="t" :size="1"></cube>
+            </oimo-body>
+          </space-object>
+        </space-system>
       </oimo-world>
     </scene>
   </renderer>

src/components/Base.vue

@@ -4,6 +4,18 @@
 
 <script>
 export default {
-  name: 'Base'
+  name: 'Base',
+
+  methods: {
+    dispatchEvent (name, detail, options = {}) {
+      // https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events
+      let e = new CustomEvent(name, {
+        detail,
+        bubbles: true,
+        ...options
+      })
+      return this.$el.dispatchEvent(e)
+    }
+  }
 }
 </script>

src/oimo/OimoBody.vue

@@ -17,15 +17,14 @@ export default {
 
     let body = this.world.add(opts)
     body.connectMesh(this.curObj)
+
     this.body = body
+    this.dispatchEvent('vm-oimo-body', this)
   },
 
   beforeDestroy () {
     this.body.dispose()
+    this.dispatchEvent('vm-oimo-body', null)
   }
 }
-
-// function radianToDegree (radian) {
-//   return radian * (180 / Math.PI)
-// }
 </script>

src/oimo/SpaceObject.vue

@@ -0,0 +1,37 @@
+<template>
+  <div @vm-oimo-body="handleBodyVm">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'space-object',
+  inject: ['spaceVms'],
+
+  data () {
+    return { bodyVm: null }
+  },
+
+  mounted () {
+    this.spaceVms.push(this)
+  },
+
+  beforeDestroy () {
+    let index = this.spaceVms.indexOf(this)
+    if (index > -1) this.spaceVms.splice(index, 1)
+  },
+
+  computed: {
+    body () {
+      return this.bodyVm && this.bodyVm.body
+    }
+  },
+
+  methods: {
+    handleBodyVm (e) {
+      this.bodyVm = e.detail
+    }
+  }
+}
+</script>

src/oimo/SpaceSystem.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <slot></slot>
+    <animation :fn="uniGravity"></animation>
+  </div>
+</template>
+
+<script>
+import Animation from '@/components/Animation'
+
+export default {
+  name: 'space-system',
+  components: { Animation },
+  props: {
+    mScale: { type: Number, default: 1 }
+  },
+
+  provide () {
+    return { spaceVms: this.spaceVms }
+  },
+
+  data () {
+    return { spaceVms: [] }
+  },
+
+  methods: {
+    uniGravity () {
+      // apply universal gracity
+      // https://en.wikipedia.org/wiki/Gravitational_constant
+      let G = 6.67408 * (10 ** -11)
+      let arr = this.spaceVms
+      let len = arr.length
+
+      for (let i = 0; i < len; i++) {
+        for (let j = i + 1; j < len - i; j++) {
+          let [vm1, vm2] = [i, j].map(k => arr[k])
+          let [b1, b2] = [vm1, vm2].map(vm => vm.body)
+          if (!b1 || !b2) continue
+
+          let [m1, m2] = [b1, b2].map(b => b.mass)
+          let [p1, p2] = [b1, b2].map(b => b.getPosition())
+          let fv1 = p2.clone().sub(p1)
+          let fvn1 = fv1.normalize()
+
+          let r = fv1.length()
+          let F = G * m1 * m2 / (r ** 2)
+          F = F * (this.mScale ** 2) // scale
+
+          let F1 = fvn1.clone().multiplyScalar(F)
+          let F2 = F1.clone().negate()
+          b1.applyImpulse(p1, F1)
+          b2.applyImpulse(p2, F2)
+        }
+      }
+    }
+  }
+}
+</script>