diff --git a/README.md b/README.md index d87db94..daa7466 100644 --- a/README.md +++ b/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 diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index c716987..29b236a 100644 --- a/src/meshes/Mesh.js +++ b/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 []; diff --git a/src/meshes/Text.js b/src/meshes/Text.js new file mode 100644 index 0000000..a96b723 --- /dev/null +++ b/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(); + }); + }, +}; diff --git a/src/meshes/index.js b/src/meshes/index.js index f1c63cd..da03915 100644 --- a/src/meshes/index.js +++ b/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';