From 900644d7db161d6e8dae590189b197dd49c7a275 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sat, 3 Oct 2020 11:00:37 +0200 Subject: [PATCH] geometries refactoring --- src/geometries/BoxGeometry.js | 19 ++++++++------ src/geometries/CircleGeometry.js | 6 +++-- src/geometries/ConeGeometry.js | 6 +++-- src/geometries/CylinderGeometry.js | 6 +++-- src/geometries/DodecahedronGeometry.js | 6 +++-- src/geometries/Geometry.js | 35 +++++++++++++++++++++++--- src/geometries/IcosahedronGeometry.js | 6 +++-- src/geometries/LatheGeometry.js | 6 +++-- src/geometries/OctahedronGeometry.js | 6 +++-- src/geometries/PolyhedronGeometry.js | 6 +++-- src/geometries/RingGeometry.js | 6 +++-- src/geometries/SphereGeometry.js | 8 +++--- src/geometries/TetrahedronGeometry.js | 6 +++-- src/geometries/TorusGeometry.js | 6 +++-- src/geometries/TorusKnotGeometry.js | 6 +++-- src/geometries/TubeGeometry.js | 6 +++-- src/geometries/index.js | 1 + 17 files changed, 101 insertions(+), 40 deletions(-) diff --git a/src/geometries/BoxGeometry.js b/src/geometries/BoxGeometry.js index 82d1cf3..8aa8e9f 100644 --- a/src/geometries/BoxGeometry.js +++ b/src/geometries/BoxGeometry.js @@ -4,16 +4,21 @@ import Geometry from './Geometry.js'; export default { extends: Geometry, props: { - size: { type: Number }, + size: Number, width: { type: Number, default: 1 }, height: { type: Number, default: 1 }, depth: { type: Number, default: 1 }, + widthSegments: { type: Number, default: 1 }, + heightSegments: { type: Number, default: 1 }, + depthSegments: { type: Number, default: 1 }, }, - created() { - if (this.size) { - this.parent.geometry = new BoxBufferGeometry(this.size, this.size, this.size); - } else { - this.parent.geometry = new BoxBufferGeometry(this.width, this.height, this.depth); - } + methods: { + createGeometry() { + let w = this.width, h = this.height, d = this.depth; + if (this.size) { + w = this.size; h = this.size; d = this.size; + } + this.geometry = new BoxBufferGeometry(w, h, d, this.widthSegments, this.heightSegments, this.depthSegments); + }, }, }; diff --git a/src/geometries/CircleGeometry.js b/src/geometries/CircleGeometry.js index 3f6c5b4..edcf48a 100644 --- a/src/geometries/CircleGeometry.js +++ b/src/geometries/CircleGeometry.js @@ -9,7 +9,9 @@ export default { thetaStart: { type: Number, default: 0 }, thetaLength: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength); + methods: { + createGeometry() { + this.geometry = new CircleBufferGeometry(this.radius, this.segments, this.thetaStart, this.thetaLength); + }, }, }; diff --git a/src/geometries/ConeGeometry.js b/src/geometries/ConeGeometry.js index 03cb4f9..6e7da22 100644 --- a/src/geometries/ConeGeometry.js +++ b/src/geometries/ConeGeometry.js @@ -12,7 +12,9 @@ export default { thetaStart: { type: Number, default: 0 }, thetaLength: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength); + methods: { + createGeometry() { + this.geometry = new ConeBufferGeometry(this.radius, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength); + }, }, }; diff --git a/src/geometries/CylinderGeometry.js b/src/geometries/CylinderGeometry.js index 7f8116f..d8a7cf6 100644 --- a/src/geometries/CylinderGeometry.js +++ b/src/geometries/CylinderGeometry.js @@ -13,7 +13,9 @@ export default { thetaStart: { type: Number, default: 0 }, thetaLength: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength); + methods: { + createGeometry() { + this.geometry = new CylinderBufferGeometry(this.radiusTop, this.radiusBottom, this.height, this.radialSegments, this.heightSegments, this.openEnded, this.thetaStart, this.thetaLength); + }, }, }; diff --git a/src/geometries/DodecahedronGeometry.js b/src/geometries/DodecahedronGeometry.js index d3b5623..00b2bb6 100644 --- a/src/geometries/DodecahedronGeometry.js +++ b/src/geometries/DodecahedronGeometry.js @@ -7,7 +7,9 @@ export default { radius: { type: Number, default: 1 }, detail: { type: Number, default: 0 }, }, - created() { - this.parent.geometry = new DodecahedronBufferGeometry(this.radius, this.detail); + methods: { + createGeometry() { + this.geometry = new DodecahedronBufferGeometry(this.radius, this.detail); + }, }, }; diff --git a/src/geometries/Geometry.js b/src/geometries/Geometry.js index a47c9e0..0d0fe38 100644 --- a/src/geometries/Geometry.js +++ b/src/geometries/Geometry.js @@ -1,12 +1,39 @@ +import { watch } from 'vue'; + export default { - inject: ['parent'], - beforeMount() { - if (!this.parent) { + emits: ['ready'], + inject: ['mesh'], + created() { + if (!this.mesh) { console.error('Missing parent Mesh'); } + this.watchProps = []; + Object.entries(this.$props).forEach(e => this.watchProps.push(e[0])); + }, + beforeMount() { + this.createGeometry(); + this.mesh.setGeometry(this.geometry); + }, + mounted() { + this.addWatchers(); }, unmounted() { - this.parent.geometry.dispose(); + this.geometry.dispose(); + }, + methods: { + addWatchers() { + this.watchProps.forEach(prop => { + watch(() => this[prop], () => { + this.refreshGeometry(); + }); + }); + }, + refreshGeometry() { + const oldGeo = this.geometry; + this.createGeometry(); + this.mesh.setGeometry(this.geometry); + oldGeo.dispose(); + }, }, render() { return []; diff --git a/src/geometries/IcosahedronGeometry.js b/src/geometries/IcosahedronGeometry.js index 9a7ef8e..4595356 100644 --- a/src/geometries/IcosahedronGeometry.js +++ b/src/geometries/IcosahedronGeometry.js @@ -7,7 +7,9 @@ export default { radius: { type: Number, default: 1 }, detail: { type: Number, default: 0 }, }, - created() { - this.parent.geometry = new IcosahedronBufferGeometry(this.radius, this.detail); + methods: { + createGeometry() { + this.geometry = new IcosahedronBufferGeometry(this.radius, this.detail); + }, }, }; diff --git a/src/geometries/LatheGeometry.js b/src/geometries/LatheGeometry.js index 745af0b..e52285d 100644 --- a/src/geometries/LatheGeometry.js +++ b/src/geometries/LatheGeometry.js @@ -9,7 +9,9 @@ export default { phiStart: { type: Number, default: 0 }, phiLength: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength); + methods: { + createGeometry() { + this.geometry = new LatheBufferGeometry(this.points, this.segments, this.phiStart, this.phiLength); + }, }, }; diff --git a/src/geometries/OctahedronGeometry.js b/src/geometries/OctahedronGeometry.js index 532474a..3901efd 100644 --- a/src/geometries/OctahedronGeometry.js +++ b/src/geometries/OctahedronGeometry.js @@ -7,7 +7,9 @@ export default { radius: { type: Number, default: 1 }, detail: { type: Number, default: 0 }, }, - created() { - this.parent.geometry = new OctahedronBufferGeometry(this.radius, this.detail); + methods: { + createGeometry() { + this.geometry = new OctahedronBufferGeometry(this.radius, this.detail); + }, }, }; diff --git a/src/geometries/PolyhedronGeometry.js b/src/geometries/PolyhedronGeometry.js index a3a4dbb..d34ef25 100644 --- a/src/geometries/PolyhedronGeometry.js +++ b/src/geometries/PolyhedronGeometry.js @@ -9,7 +9,9 @@ export default { radius: { type: Number, default: 1 }, detail: { type: Number, default: 0 }, }, - created() { - this.parent.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail); + methods: { + createGeometry() { + this.geometry = new PolyhedronBufferGeometry(this.vertices, this.indices, this.radius, this.detail); + }, }, }; diff --git a/src/geometries/RingGeometry.js b/src/geometries/RingGeometry.js index ae45c40..02cbcb7 100644 --- a/src/geometries/RingGeometry.js +++ b/src/geometries/RingGeometry.js @@ -11,7 +11,9 @@ export default { thetaStart: { type: Number, default: 0 }, thetaLength: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength); + methods: { + createGeometry() { + this.geometry = new RingBufferGeometry(this.innerRadius, this.outerRadius, this.thetaSegments, this.phiSegments, this.thetaStart, this.thetaLength); + }, }, }; diff --git a/src/geometries/SphereGeometry.js b/src/geometries/SphereGeometry.js index ab9c994..eb1df04 100644 --- a/src/geometries/SphereGeometry.js +++ b/src/geometries/SphereGeometry.js @@ -4,11 +4,13 @@ import Geometry from './Geometry.js'; export default { extends: Geometry, props: { - radius: Number, + radius: { type: Number, default: 1 }, widthSegments: { type: Number, default: 12 }, heightSegments: { type: Number, default: 12 }, }, - created() { - this.parent.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); + methods: { + createGeometry() { + this.geometry = new SphereBufferGeometry(this.radius, this.widthSegments, this.heightSegments); + }, }, }; diff --git a/src/geometries/TetrahedronGeometry.js b/src/geometries/TetrahedronGeometry.js index 045084b..7f6b968 100644 --- a/src/geometries/TetrahedronGeometry.js +++ b/src/geometries/TetrahedronGeometry.js @@ -7,7 +7,9 @@ export default { radius: { type: Number, default: 1 }, detail: { type: Number, default: 0 }, }, - created() { - this.parent.geometry = new TetrahedronBufferGeometry(this.radius, this.detail); + methods: { + createGeometry() { + this.geometry = new TetrahedronBufferGeometry(this.radius, this.detail); + }, }, }; diff --git a/src/geometries/TorusGeometry.js b/src/geometries/TorusGeometry.js index ee1a596..82be289 100644 --- a/src/geometries/TorusGeometry.js +++ b/src/geometries/TorusGeometry.js @@ -10,7 +10,9 @@ export default { tubularSegments: { type: Number, default: 6 }, arc: { type: Number, default: Math.PI * 2 }, }, - created() { - this.parent.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc); + methods: { + createGeometry() { + this.geometry = new TorusBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.arc); + }, }, }; diff --git a/src/geometries/TorusKnotGeometry.js b/src/geometries/TorusKnotGeometry.js index bdca8de..0c33ca2 100644 --- a/src/geometries/TorusKnotGeometry.js +++ b/src/geometries/TorusKnotGeometry.js @@ -11,7 +11,9 @@ export default { p: { type: Number, default: 2 }, q: { type: Number, default: 3 }, }, - created() { - this.parent.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q); + methods: { + createGeometry() { + this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q); + }, }, }; diff --git a/src/geometries/TubeGeometry.js b/src/geometries/TubeGeometry.js index 15e3553..944c2c3 100644 --- a/src/geometries/TubeGeometry.js +++ b/src/geometries/TubeGeometry.js @@ -10,7 +10,9 @@ export default { radiusSegments: { type: Number, default: 8 }, closed: { type: Boolean, default: false }, }, - created() { - this.parent.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed); + methods: { + createGeometry() { + this.geometry = new TubeBufferGeometry(this.path, this.tubularSegments, this.radius, this.radiusSegments, this.closed); + }, }, }; diff --git a/src/geometries/index.js b/src/geometries/index.js index 05ab88c..d4f53ad 100644 --- a/src/geometries/index.js +++ b/src/geometries/index.js @@ -1,5 +1,6 @@ export { default as BoxGeometry } from './BoxGeometry.js'; export { default as CircleGeometry } from './CircleGeometry.js'; +export { default as ConeGeometry } from './ConeGeometry.js'; export { default as CylinderGeometry } from './CylinderGeometry.js'; export { default as DodecahedronGeometry } from './DodecahedronGeometry.js'; export { default as IcosahedronGeometry } from './IcosahedronGeometry.js';