add text mesh

README.md

@@ -33,7 +33,9 @@ I started from scratch... I don't know if I will have time to maintain this, but
   - [ ] ...
 - [ ] Meshes
   - [x] Box
+  - [x] Plane
   - [x] Sphere
+  - [x] Text
   - [x] InstancedMesh
   - [ ] ...
 - [ ] Post Processing
@@ -41,6 +43,7 @@ I started from scratch... I don't know if I will have time to maintain this, but
   - [x] Renderpass
   - [x] UnrealBloomPass
   - [ ] ...
+- [ ] Watch props
 - [ ] Improve HMR
 
 ## Installation

src/meshes/Mesh.js

@@ -18,16 +18,21 @@ export default {
     },
   },
   mounted() {
-    this.mesh = new Mesh(this.geometry, this.three.materials[this.material]);
-    setFromProp(this.mesh.position, this.position);
-    setFromProp(this.mesh.rotation, this.rotation);
-    setFromProp(this.mesh.scale, this.scale);
-    this.mesh.castShadow = this.castShadow;
-    this.mesh.receiveShadow = this.receiveShadow;
-    this.scene.add(this.mesh);
+    if (this.geometry) this.initMesh();
   },
   unmounted() {
-    this.geometry.dispose();
+    if (this.geometry) this.geometry.dispose();
+  },
+  methods: {
+    initMesh() {
+      this.mesh = new Mesh(this.geometry, this.three.materials[this.material]);
+      setFromProp(this.mesh.position, this.position);
+      setFromProp(this.mesh.rotation, this.rotation);
+      setFromProp(this.mesh.scale, this.scale);
+      this.mesh.castShadow = this.castShadow;
+      this.mesh.receiveShadow = this.receiveShadow;
+      this.scene.add(this.mesh);
+    },
   },
   render() {
     return [];

src/meshes/Text.js

@@ -0,0 +1,38 @@
+import { FontLoader, TextBufferGeometry } from 'three';
+import Mesh from './Mesh.js';
+
+export default {
+  extends: Mesh,
+  props: {
+    text: String,
+    fontSrc: String,
+    size: { type: Number, default: 80 },
+    height: { type: Number, default: 5 },
+    depth: { type: Number, default: 1 },
+    curveSegments: { type: Number, default: 12 },
+    bevelEnabled: { type: Boolean, default: false },
+    bevelThickness: { type: Number, default: 10 },
+    bevelSize: { type: Number, default: 8 },
+    bevelOffset: { type: Number, default: 0 },
+    bevelSegments: { type: Number, default: 5 },
+  },
+  created() {
+    const loader = new FontLoader();
+    loader.load(this.fontSrc, (font) => {
+      this.font = font;
+      this.geometry = new TextBufferGeometry(this.text, {
+        font,
+        size: this.size,
+        height: this.height,
+        depth: this.depth,
+        curveSegments: this.curveSegments,
+        bevelEnabled: this.bevelEnabled,
+        bevelThickness: this.bevelThickness,
+        bevelSize: this.bevelSize,
+        bevelOffset: this.bevelOffset,
+        bevelSegments: this.bevelSegments,
+      });
+      this.initMesh();
+    });
+  },
+};

src/meshes/index.js

@@ -1,5 +1,6 @@
 export { default as Box } from './Box.js';
 export { default as Plane } from './Plane.js';
 export { default as Sphere } from './Sphere.js';
+export { default as Text } from './Text.js';
 
 export { default as InstancedMesh } from './InstancedMesh.js';