wip

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

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';

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.createGeometry();
-      this.geometry = new BoxBufferGeometry(this.size, this.size, this.size);
+  },
-    } else {
+  methods: {
-      this.geometry = new BoxBufferGeometry(this.width, this.height, this.depth);
+    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',
 };

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 [];

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',
 };

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',
 };

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;

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();
-    });
   },
 };