From 168289c6415a2692cb5242ce33d0ac7705cba5ae Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 3 Apr 2021 22:54:11 +0200 Subject: [PATCH] defineComponent for meshes and simplify (#10) --- src/meshes/Box.js | 17 ++--------------- src/meshes/Circle.js | 17 ++--------------- src/meshes/Cone.js | 17 ++--------------- src/meshes/Cylinder.js | 17 ++--------------- src/meshes/Dodecahedron.js | 17 ++--------------- src/meshes/Gem.js | 5 +++-- src/meshes/Icosahedron.js | 17 ++--------------- src/meshes/Image.js | 6 +++--- src/meshes/InstancedMesh.js | 5 +++-- src/meshes/Lathe.js | 17 ++--------------- src/meshes/Mesh.js | 28 ++++++++++++++++++++++++---- src/meshes/MirrorMesh.js | 5 +++-- src/meshes/Octahedron.js | 17 ++--------------- src/meshes/Plane.js | 17 ++--------------- src/meshes/Polyhedron.js | 17 ++--------------- src/meshes/RefractionMesh.js | 5 +++-- src/meshes/Ring.js | 17 ++--------------- src/meshes/Sphere.js | 17 ++--------------- src/meshes/Sprite.js | 5 +++-- src/meshes/Tetrahedron.js | 17 ++--------------- src/meshes/Text.js | 26 +++++++++++++++++++------- src/meshes/TextProps.js | 14 -------------- src/meshes/Torus.js | 17 ++--------------- src/meshes/TorusKnot.js | 17 ++--------------- src/meshes/Tube.js | 5 +++-- 25 files changed, 94 insertions(+), 265 deletions(-) delete mode 100644 src/meshes/TextProps.js diff --git a/src/meshes/Box.js b/src/meshes/Box.js index 4d528eb..9b72f52 100644 --- a/src/meshes/Box.js +++ b/src/meshes/Box.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/BoxGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Box', -}; +export default meshComponent('Box', props, createGeometry); diff --git a/src/meshes/Circle.js b/src/meshes/Circle.js index 67393b0..8baceb2 100644 --- a/src/meshes/Circle.js +++ b/src/meshes/Circle.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/CircleGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Circle', -}; +export default meshComponent('Circle', props, createGeometry); diff --git a/src/meshes/Cone.js b/src/meshes/Cone.js index 8c8e692..8919e86 100644 --- a/src/meshes/Cone.js +++ b/src/meshes/Cone.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/ConeGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Cone', -}; +export default meshComponent('Cone', props, createGeometry); diff --git a/src/meshes/Cylinder.js b/src/meshes/Cylinder.js index f258f4e..762a545 100644 --- a/src/meshes/Cylinder.js +++ b/src/meshes/Cylinder.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/CylinderGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Cylinder', -}; +export default meshComponent('Cylinder', props, createGeometry); diff --git a/src/meshes/Dodecahedron.js b/src/meshes/Dodecahedron.js index 95c8303..1ad3e6a 100644 --- a/src/meshes/Dodecahedron.js +++ b/src/meshes/Dodecahedron.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/DodecahedronGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Dodecahedron', -}; +export default meshComponent('Dodecahedron', props, createGeometry); diff --git a/src/meshes/Gem.js b/src/meshes/Gem.js index 47c3c49..1e77bc8 100644 --- a/src/meshes/Gem.js +++ b/src/meshes/Gem.js @@ -1,3 +1,4 @@ +import { defineComponent } from 'vue'; import { BackSide, CubeCamera, @@ -10,7 +11,7 @@ import { import Mesh from './Mesh.js'; import { bindProp } from '../tools'; -export default { +export default defineComponent({ extends: Mesh, props: { cubeRTSize: { type: Number, default: 256 }, @@ -69,4 +70,4 @@ export default { }, }, __hmrId: 'Gem', -}; +}); diff --git a/src/meshes/Icosahedron.js b/src/meshes/Icosahedron.js index 9d4f1bc..e687b67 100644 --- a/src/meshes/Icosahedron.js +++ b/src/meshes/Icosahedron.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/IcosahedronGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Icosahedron', -}; +export default meshComponent('Icosahedron', props, createGeometry); diff --git a/src/meshes/Image.js b/src/meshes/Image.js index 184d0e2..34dd502 100644 --- a/src/meshes/Image.js +++ b/src/meshes/Image.js @@ -1,8 +1,8 @@ +import { defineComponent, watch } from 'vue'; import { DoubleSide, MeshBasicMaterial, PlaneGeometry, TextureLoader } from 'three'; -import { watch } from 'vue'; import Mesh from './Mesh.js'; -export default { +export default defineComponent({ emits: ['loaded'], extends: Mesh, props: { @@ -66,4 +66,4 @@ export default { }, }, __hmrId: 'Image', -}; +}); diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js index 538852c..1172d40 100644 --- a/src/meshes/InstancedMesh.js +++ b/src/meshes/InstancedMesh.js @@ -1,9 +1,10 @@ +import { defineComponent } from 'vue'; import { InstancedMesh } from 'three'; import Object3D from '../core/Object3D'; import { bindProp } from '../tools'; import { pointerProps } from './Mesh'; -export default { +export default defineComponent({ extends: Object3D, props: { castShadow: Boolean, @@ -60,4 +61,4 @@ export default { } }, __hmrId: 'InstancedMesh', -}; +}); diff --git a/src/meshes/Lathe.js b/src/meshes/Lathe.js index 904e16b..b54e38e 100644 --- a/src/meshes/Lathe.js +++ b/src/meshes/Lathe.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/LatheGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Lathe', -}; +export default meshComponent('Lathe', props, createGeometry); diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js index b07ce6b..f25bf85 100644 --- a/src/meshes/Mesh.js +++ b/src/meshes/Mesh.js @@ -1,5 +1,5 @@ -import { watch } from 'vue'; -import { Mesh } from 'three'; +import { defineComponent, watch } from 'vue'; +import { Mesh as TMesh } from 'three'; import Object3D from '../core/Object3D.js'; import { bindProp } from '../tools'; @@ -13,7 +13,7 @@ export const pointerProps = { onClick: Function, }; -export default { +const Mesh = defineComponent({ name: 'Mesh', extends: Object3D, props: { @@ -33,7 +33,7 @@ export default { }, methods: { initMesh() { - this.mesh = new Mesh(this.geometry, this.material); + this.mesh = new TMesh(this.geometry, this.material); this.mesh.component = this; bindProp(this, 'castShadow', this.mesh); @@ -81,4 +81,24 @@ export default { if (this.geometry) this.geometry.dispose(); }, __hmrId: 'Mesh', +}); + +export default Mesh; + +export function meshComponent(name, props, createGeometry) { + return defineComponent({ + name, + extends: Mesh, + props, + created() { + this.createGeometry(); + this.addGeometryWatchers(props); + }, + methods: { + createGeometry() { + this.geometry = createGeometry(this); + }, + }, + __hmrId: name, + }); }; diff --git a/src/meshes/MirrorMesh.js b/src/meshes/MirrorMesh.js index 0d2cda6..99a2edf 100644 --- a/src/meshes/MirrorMesh.js +++ b/src/meshes/MirrorMesh.js @@ -1,3 +1,4 @@ +import { defineComponent } from 'vue'; import { CubeCamera, LinearMipmapLinearFilter, @@ -6,7 +7,7 @@ import { } from 'three'; import Mesh from './Mesh.js'; -export default { +export default defineComponent({ extends: Mesh, props: { cubeRTSize: { type: Number, default: 256 }, @@ -39,4 +40,4 @@ export default { }, }, __hmrId: 'MirrorMesh', -}; +}); diff --git a/src/meshes/Octahedron.js b/src/meshes/Octahedron.js index 66effad..7354120 100644 --- a/src/meshes/Octahedron.js +++ b/src/meshes/Octahedron.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/OctahedronGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Octahedron', -}; +export default meshComponent('Octahedron', props, createGeometry); diff --git a/src/meshes/Plane.js b/src/meshes/Plane.js index fdb27e7..286cfc7 100644 --- a/src/meshes/Plane.js +++ b/src/meshes/Plane.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/PlaneGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Plane', -}; +export default meshComponent('Plane', props, createGeometry); diff --git a/src/meshes/Polyhedron.js b/src/meshes/Polyhedron.js index 6bbe044..d8bed07 100644 --- a/src/meshes/Polyhedron.js +++ b/src/meshes/Polyhedron.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/PolyhedronGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Polyhedron', -}; +export default meshComponent('Polyhedron', props, createGeometry); diff --git a/src/meshes/RefractionMesh.js b/src/meshes/RefractionMesh.js index 56d28fb..ceb0a45 100644 --- a/src/meshes/RefractionMesh.js +++ b/src/meshes/RefractionMesh.js @@ -1,3 +1,4 @@ +import { defineComponent } from 'vue'; import { CubeCamera, CubeRefractionMapping, @@ -8,7 +9,7 @@ import { import Mesh from './Mesh.js'; import { bindProp } from '../tools'; -export default { +export default defineComponent({ extends: Mesh, props: { cubeRTSize: { type: Number, default: 256 }, @@ -44,4 +45,4 @@ export default { }, }, __hmrId: 'RefractionMesh', -}; +}); diff --git a/src/meshes/Ring.js b/src/meshes/Ring.js index 98a043b..7358c89 100644 --- a/src/meshes/Ring.js +++ b/src/meshes/Ring.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/RingGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Ring', -}; +export default meshComponent('Ring', props, createGeometry); diff --git a/src/meshes/Sphere.js b/src/meshes/Sphere.js index 6794275..2fcd0d5 100644 --- a/src/meshes/Sphere.js +++ b/src/meshes/Sphere.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/SphereGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Sphere', -}; +export default meshComponent('Sphere', props, createGeometry); diff --git a/src/meshes/Sprite.js b/src/meshes/Sprite.js index 3093902..af6b2b9 100644 --- a/src/meshes/Sprite.js +++ b/src/meshes/Sprite.js @@ -1,7 +1,8 @@ +import { defineComponent } from 'vue'; import { Sprite, SpriteMaterial, TextureLoader } from 'three'; import Object3D from '../core/Object3D.js'; -export default { +export default defineComponent({ extends: Object3D, emits: ['loaded'], props: { @@ -50,4 +51,4 @@ export default { }, }, __hmrId: 'Sprite', -}; +}); diff --git a/src/meshes/Tetrahedron.js b/src/meshes/Tetrahedron.js index 8cff6e7..08b9ad5 100644 --- a/src/meshes/Tetrahedron.js +++ b/src/meshes/Tetrahedron.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/TetrahedronGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Tetrahedron', -}; +export default meshComponent('Tetrahedron', props, createGeometry); diff --git a/src/meshes/Text.js b/src/meshes/Text.js index ddf3b23..67ead70 100644 --- a/src/meshes/Text.js +++ b/src/meshes/Text.js @@ -1,13 +1,25 @@ +import { defineComponent, watch } from 'vue'; import { FontLoader, TextGeometry } from 'three'; -import { watch } from 'vue'; import Mesh from './Mesh.js'; -import TextProps from './TextProps.js'; -export default { +const 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 }, + align: { type: [Boolean, String], default: false }, +}; + +export default defineComponent({ extends: Mesh, - props: { - ...TextProps, - }, + props, data() { return { loading: true, @@ -54,4 +66,4 @@ export default { } }, }, -}; +}); diff --git a/src/meshes/TextProps.js b/src/meshes/TextProps.js deleted file mode 100644 index 104dac7..0000000 --- a/src/meshes/TextProps.js +++ /dev/null @@ -1,14 +0,0 @@ -export default { - 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 }, - align: { type: [Boolean, String], default: false }, -}; diff --git a/src/meshes/Torus.js b/src/meshes/Torus.js index e697a93..6178f40 100644 --- a/src/meshes/Torus.js +++ b/src/meshes/Torus.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/TorusGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'Torus', -}; +export default meshComponent('Torus', props, createGeometry); diff --git a/src/meshes/TorusKnot.js b/src/meshes/TorusKnot.js index cf2d1a1..0611c16 100644 --- a/src/meshes/TorusKnot.js +++ b/src/meshes/TorusKnot.js @@ -1,17 +1,4 @@ -import Mesh from './Mesh.js'; +import { meshComponent } from './Mesh.js'; import { props, createGeometry } from '../geometries/TorusKnotGeometry.js'; -export default { - extends: Mesh, - props, - created() { - this.createGeometry(); - this.addGeometryWatchers(props); - }, - methods: { - createGeometry() { - this.geometry = createGeometry(this); - }, - }, - __hmrId: 'TorusKnot', -}; +export default meshComponent('TorusKnot', props, createGeometry); diff --git a/src/meshes/Tube.js b/src/meshes/Tube.js index 2a998c2..b93d757 100644 --- a/src/meshes/Tube.js +++ b/src/meshes/Tube.js @@ -1,7 +1,8 @@ +import { defineComponent } from 'vue'; import Mesh from './Mesh.js'; import { props, createGeometry, updateTubeGeometryPoints } from '../geometries/TubeGeometry.js'; -export default { +export default defineComponent({ extends: Mesh, props, created() { @@ -18,4 +19,4 @@ export default { }, }, __hmrId: 'Tube', -}; +});