wip(mesh): simplify ocean logic 'n update readme

Author: fritx

Diff for: README.md

@@ -18,7 +18,7 @@ Vue.use(VueThreejs)
   <renderer :size="{ w: 600, h: 400 }">
     <scene>
       <camera :position="{ z: 15 }"></camera>
-      <object3d :obj="mesh" :position="{ y: -200 }"></object3d>
+      <mesh :obj="mesh" :position="{ y: -200 }"></mesh>
       <animation :fn="animate" :speed="3"></animation>
     </scene>
   </renderer>
@@ -40,15 +40,27 @@ Vue.use(VueThreejs)
 </movement-system>
 ```
 
+```vue
+<oimo-world :options="{ gravity: [0, -9.8, 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>
+```
+
 **Roadmap**
 
-- [ ] Basic components
+- [x] Basic components
   - [x] renderer/scene/camera/listener
   - [x] object3d/light/audio/controls/animation
-  - [ ] mesh/more
+  - [x] mesh/geometry/material/texture/obj-mtl
 - [ ] Watch for props change
-  - [x] position/rotation
-  - [ ] obj/more
+  - [x] position/rotation/obj
+  - [ ] more
 - [ ] Animation
   - [x] component/animate/speed/paused/blocked
   - [ ] global-control

Diff for: examples/Ocean.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <mesh name="Ocean">
-      <geometry type="Plane" :args="[10000, 10000, 40, 40]"
-          :obj.sync="geom"></geometry>
+    <mesh name="Ocean" @update:obj="handleMesh">
+      <geometry type="Plane" :args="[10000, 10000, 40, 40]"></geometry>
       <material type="MeshBasic" :color="0x0044ff">
         <texture :options="txtOpts"></texture>
       </material>
     </mesh>
-    <animation v-if="geomReady" :fn="animate" :speed="5"></animation>
+    <animation v-if="geom" :fn="animate" :speed="5"></animation>
   </div>
 </template>
 
@@ -28,23 +27,21 @@ export default {
         wrapT: RepeatWrapping,
         repeat: [5, 5]
       },
-      geomReady: false,
-      geom: null,
-      ocean: null
+      geom: null
     }
   },
 
-  watch: {
-    geom (g) {
+  methods: {
+    handleMesh (mesh) {
+      if (!mesh) return
+      let g = mesh.geometry
       g.rotateX(-Math.PI / 2)
       for (let i = 0, l = g.vertices.length; i < l; i++) {
         g.vertices[ i ].y = 10 * Math.sin(i / 2)
       }
-      this.geomReady = true
-    }
-  },
+      this.geom = g
+    },
 
-  methods: {
     animate (tt) {
       let g = this.geom
       for (let i = 0, l = g.vertices.length; i < l; i++) {

Diff for: src/components/Object3D.vue

@@ -41,6 +41,9 @@ export default {
         Object.assign(this.curObj.rotation, v)
       }
     },
+    obj (obj) {
+      this.curObj = obj
+    },
     curObj (obj, oldObj) {
       this.unsetObj(oldObj)
       this.setObj(obj)