From 1611539d638c5c3b9519c50d2015526be086e754 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sat, 19 Sep 2020 21:42:33 +0200
Subject: [PATCH] wip

---
 README.md            |  4 ++++
 src/effects/index.js |  1 +
 src/meshes/Box.js    | 21 ++++++++++++++++-----
 src/meshes/Mesh.js   |  6 ++++++
 src/meshes/Plane.js  | 13 ++++++++++++-
 src/meshes/Sphere.js | 12 +++++++++++-
 src/meshes/Sprite.js |  1 -
 src/meshes/Text.js   | 25 +++++++++++++++++++++----
 8 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 9a3f08c..01f830d 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,10 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
   - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent
     - [x] StandardMaterial : emissive, emissiveIntensity, metalness, roughness
   - [x] Mesh : position, rotation, scale, castShadow, receiveShadow
+    - [x] Box (geometry replace) : size, width, height, depth
+    - [x] Plane (geometry replace) : width, height, widthSegments, heightSegments
+    - [x] Sphere (geometry replace) : radius, widthSegments, heightSegments
+    - [x] Text (geometry replace) : all props except fontSrc (wip)
   - [ ] ...
 
 ## Features
diff --git a/src/effects/index.js b/src/effects/index.js
index a9dfc1d..e29909f 100644
--- a/src/effects/index.js
+++ b/src/effects/index.js
@@ -1,4 +1,5 @@
 export { default as EffectComposer } from './EffectComposer.js';
 export { default as RenderPass } from './RenderPass.js';
 export { default as BokehPass } from './BokehPass.js';
+export { default as FilmPass } from './FilmPass.js';
 export { default as UnrealBloomPass } from './UnrealBloomPass.js';
diff --git a/src/meshes/Box.js b/src/meshes/Box.js
index 8bc0f78..387c8c1 100644
--- a/src/meshes/Box.js
+++ b/src/meshes/Box.js
@@ -20,12 +20,23 @@ export default {
       default: 1,
     },
   },
+  watch: {
+    size() { this.refreshGeometry(); },
+    width() { this.refreshGeometry(); },
+    height() { this.refreshGeometry(); },
+    depth() { this.refreshGeometry(); },
+  },
   created() {
-    if (this.size) {
-      this.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
-    } else {
-      this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
-    }
+    this.createGeometry();
+  },
+  methods: {
+    createGeometry() {
+      if (this.size) {
+        this.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
+      } else {
+        this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
+      }
+    },
   },
   __hmrId: 'Box',
 };
diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js
index e218e09..95e1d4a 100644
--- a/src/meshes/Mesh.js
+++ b/src/meshes/Mesh.js
@@ -46,6 +46,12 @@ export default {
       this.scene.add(this.mesh);
       this.$emit('ready');
     },
+    refreshGeometry() {
+      const oldGeo = this.geometry;
+      this.createGeometry();
+      this.mesh.geometry = this.geometry;
+      oldGeo.dispose();
+    },
   },
   render() {
     return [];
diff --git a/src/meshes/Plane.js b/src/meshes/Plane.js
index 658b63a..c7ebaf6 100644
--- a/src/meshes/Plane.js
+++ b/src/meshes/Plane.js
@@ -21,8 +21,19 @@ export default {
       default: 1,
     },
   },
+  watch: {
+    width() { this.refreshGeometry(); },
+    height() { this.refreshGeometry(); },
+    widthSegments() { this.refreshGeometry(); },
+    heightSegments() { this.refreshGeometry(); },
+  },
   created() {
-    this.geometry = new PlaneBufferGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
+    this.createGeometry();
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new PlaneBufferGeometry(this.width, this.height, this.widthSegments, this.heightSegments);
+    },
   },
   __hmrId: 'Plane',
 };
diff --git a/src/meshes/Sphere.js b/src/meshes/Sphere.js
index 8e288fc..2d80ec9 100644
--- a/src/meshes/Sphere.js
+++ b/src/meshes/Sphere.js
@@ -14,8 +14,18 @@ export default {
       default: 12,
     },
   },
+  watch: {
+    radius() { this.refreshGeometry(); },
+    widthSegments() { this.refreshGeometry(); },
+    heightSegments() { this.refreshGeometry(); },
+  },
   created() {
-    this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
+    this.createGeometry();
+  },
+  methods: {
+    createGeometry() {
+      this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments);
+    },
   },
   __hmrId: 'Sphere',
 };
diff --git a/src/meshes/Sprite.js b/src/meshes/Sprite.js
index 6b4f6d7..f17d757 100644
--- a/src/meshes/Sprite.js
+++ b/src/meshes/Sprite.js
@@ -31,7 +31,6 @@ export default {
       this.$emit('loaded');
     },
     updateUV() {
-      // console.log(this.texture);
       this.iWidth = this.texture.image.width;
       this.iHeight = this.texture.image.height;
       this.iRatio = this.iWidth / this.iHeight;
diff --git a/src/meshes/Text.js b/src/meshes/Text.js
index 3a5611b..5994f08 100644
--- a/src/meshes/Text.js
+++ b/src/meshes/Text.js
@@ -1,5 +1,6 @@
 import { FontLoader, TextBufferGeometry } from 'three';
 import Mesh from './Mesh.js';
+import { watch } from 'vue';
 
 export default {
   extends: Mesh,
@@ -18,11 +19,29 @@ export default {
     align: { type: [Boolean, String], default: false },
   },
   created() {
+    // add watchers
+    const watchProps = [
+      'text', 'size', 'height', 'curveSegments',
+      'bevelEnabled', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments',
+      'align',
+    ];
+    watchProps.forEach(p => {
+      watch(() => this[p], () => {
+        if (this.font) this.refreshGeometry();
+      });
+    });
+
     const loader = new FontLoader();
     loader.load(this.fontSrc, (font) => {
       this.font = font;
+      this.createGeometry();
+      this.initMesh();
+    });
+  },
+  methods: {
+    createGeometry() {
       this.geometry = new TextBufferGeometry(this.text, {
-        font,
+        font: this.font,
         size: this.size,
         height: this.height,
         depth: this.depth,
@@ -37,8 +56,6 @@ export default {
       if (this.align === 'center') {
         this.geometry.center();
       }
-
-      this.initMesh();
-    });
+    },
   },
 };