From 5df3223bd6ff932d81a79b1dcf2fd8314869b89e Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Sun, 18 Apr 2021 22:25:24 +0200 Subject: [PATCH] wip: geometries --- src/geometries/BoxGeometry.ts | 2 +- src/geometries/CircleGeometry.ts | 2 +- src/geometries/ConeGeometry.ts | 2 +- src/geometries/CylinderGeometry.ts | 2 +- src/geometries/DodecahedronGeometry.ts | 2 +- src/geometries/Geometry.ts | 45 ++++++++++++++++++++------ src/geometries/IcosahedronGeometry.ts | 2 +- src/geometries/LatheGeometry.ts | 2 +- src/geometries/OctahedronGeometry.ts | 2 +- src/geometries/PlaneGeometry.ts | 2 +- src/geometries/PolyhedronGeometry.ts | 2 +- src/geometries/RingGeometry.ts | 2 +- src/geometries/SphereGeometry.ts | 2 +- src/geometries/TetrahedronGeometry.ts | 2 +- src/geometries/TorusGeometry.ts | 2 +- src/geometries/TorusKnotGeometry.ts | 2 +- src/geometries/TubeGeometry.ts | 2 +- src/geometries/{index.js => index.ts} | 0 18 files changed, 51 insertions(+), 26 deletions(-) rename src/geometries/{index.js => index.ts} (100%) diff --git a/src/geometries/BoxGeometry.ts b/src/geometries/BoxGeometry.ts index e47f9c7..e7cc409 100644 --- a/src/geometries/BoxGeometry.ts +++ b/src/geometries/BoxGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { BoxGeometry } from 'three' export const props = { diff --git a/src/geometries/CircleGeometry.ts b/src/geometries/CircleGeometry.ts index 6ec0114..a58adfa 100644 --- a/src/geometries/CircleGeometry.ts +++ b/src/geometries/CircleGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { CircleGeometry } from 'three' export const props = { diff --git a/src/geometries/ConeGeometry.ts b/src/geometries/ConeGeometry.ts index d07fd20..c4abb40 100644 --- a/src/geometries/ConeGeometry.ts +++ b/src/geometries/ConeGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { ConeGeometry } from 'three' export const props = { diff --git a/src/geometries/CylinderGeometry.ts b/src/geometries/CylinderGeometry.ts index c84b531..4d70219 100644 --- a/src/geometries/CylinderGeometry.ts +++ b/src/geometries/CylinderGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { CylinderGeometry } from 'three' export const props = { diff --git a/src/geometries/DodecahedronGeometry.ts b/src/geometries/DodecahedronGeometry.ts index 5f8b663..f3dd33e 100644 --- a/src/geometries/DodecahedronGeometry.ts +++ b/src/geometries/DodecahedronGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { DodecahedronGeometry } from 'three' export const props = { diff --git a/src/geometries/Geometry.ts b/src/geometries/Geometry.ts index 3171298..7c45ad6 100644 --- a/src/geometries/Geometry.ts +++ b/src/geometries/Geometry.ts @@ -1,48 +1,69 @@ -import { defineComponent, watch } from 'vue' +import { BufferGeometry } from 'three' +import { defineComponent, inject, watch } from 'vue' + +interface MeshInterface { + setGeometry(geometry: BufferGeometry): void +} + +interface GeometryInterface { + geometry?: BufferGeometry + mesh?: MeshInterface + watchProps: string[] +} + +function defaultSetup(): GeometryInterface { + const mesh = inject('mesh') as MeshInterface + const watchProps: string[] = [] + return { mesh, watchProps } +} const Geometry = defineComponent({ - inject: ['mesh'], props: { rotateX: Number, rotateY: Number, rotateZ: Number, }, + setup() { + return defaultSetup() + }, created() { if (!this.mesh) { console.error('Missing parent Mesh') + return } - this.watchProps = [] Object.entries(this.$props).forEach(e => this.watchProps.push(e[0])) this.createGeometry() this.rotateGeometry() - this.mesh.setGeometry(this.geometry) + if (this.geometry) this.mesh.setGeometry(this.geometry) this.addWatchers() }, unmounted() { - this.geometry.dispose() + this.geometry?.dispose() }, methods: { + createGeometry() {}, addWatchers() { this.watchProps.forEach(prop => { + // @ts-ignore watch(() => this[prop], () => { this.refreshGeometry() }) }) }, rotateGeometry() { - if (this.rotateX) this.geometry.rotateX(this.rotateX) - if (this.rotateY) this.geometry.rotateY(this.rotateY) - if (this.rotateZ) this.geometry.rotateZ(this.rotateZ) + if (this.rotateX) this.geometry?.rotateX(this.rotateX) + if (this.rotateY) this.geometry?.rotateY(this.rotateY) + if (this.rotateZ) this.geometry?.rotateZ(this.rotateZ) }, refreshGeometry() { const oldGeo = this.geometry this.createGeometry() this.rotateGeometry() - this.mesh.setGeometry(this.geometry) - oldGeo.dispose() + if (this.geometry) this.mesh?.setGeometry(this.geometry) + oldGeo?.dispose() }, }, render() { return []; }, @@ -55,10 +76,14 @@ export function geometryComponent(name, props, createGeometry) { name, extends: Geometry, props, + setup() { + return defaultSetup() + }, methods: { createGeometry() { this.geometry = createGeometry(this) }, }, + // __hmrId: name, }) } diff --git a/src/geometries/IcosahedronGeometry.ts b/src/geometries/IcosahedronGeometry.ts index 65ca668..e96c3d6 100644 --- a/src/geometries/IcosahedronGeometry.ts +++ b/src/geometries/IcosahedronGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { IcosahedronGeometry } from 'three' export const props = { diff --git a/src/geometries/LatheGeometry.ts b/src/geometries/LatheGeometry.ts index c0b7fbe..281d807 100644 --- a/src/geometries/LatheGeometry.ts +++ b/src/geometries/LatheGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { LatheGeometry } from 'three' export const props = { diff --git a/src/geometries/OctahedronGeometry.ts b/src/geometries/OctahedronGeometry.ts index 5b151c6..430620b 100644 --- a/src/geometries/OctahedronGeometry.ts +++ b/src/geometries/OctahedronGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { OctahedronGeometry } from 'three' export const props = { diff --git a/src/geometries/PlaneGeometry.ts b/src/geometries/PlaneGeometry.ts index 18f0fb4..f3b8fbb 100644 --- a/src/geometries/PlaneGeometry.ts +++ b/src/geometries/PlaneGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { PlaneGeometry } from 'three' export const props = { diff --git a/src/geometries/PolyhedronGeometry.ts b/src/geometries/PolyhedronGeometry.ts index aefbfa0..4a7e10a 100644 --- a/src/geometries/PolyhedronGeometry.ts +++ b/src/geometries/PolyhedronGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { PolyhedronGeometry } from 'three' export const props = { diff --git a/src/geometries/RingGeometry.ts b/src/geometries/RingGeometry.ts index 994834b..ee30e97 100644 --- a/src/geometries/RingGeometry.ts +++ b/src/geometries/RingGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { RingGeometry } from 'three' export const props = { diff --git a/src/geometries/SphereGeometry.ts b/src/geometries/SphereGeometry.ts index 2b302ea..2a1c316 100644 --- a/src/geometries/SphereGeometry.ts +++ b/src/geometries/SphereGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { SphereGeometry } from 'three' export const props = { diff --git a/src/geometries/TetrahedronGeometry.ts b/src/geometries/TetrahedronGeometry.ts index 397e8a8..757e3cc 100644 --- a/src/geometries/TetrahedronGeometry.ts +++ b/src/geometries/TetrahedronGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { TetrahedronGeometry } from 'three' export const props = { diff --git a/src/geometries/TorusGeometry.ts b/src/geometries/TorusGeometry.ts index 644488e..99de1e4 100644 --- a/src/geometries/TorusGeometry.ts +++ b/src/geometries/TorusGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { TorusGeometry } from 'three' export const props = { diff --git a/src/geometries/TorusKnotGeometry.ts b/src/geometries/TorusKnotGeometry.ts index 234e32c..7ac6958 100644 --- a/src/geometries/TorusKnotGeometry.ts +++ b/src/geometries/TorusKnotGeometry.ts @@ -1,4 +1,4 @@ -import { geometryComponent } from './Geometry.js' +import { geometryComponent } from './Geometry' import { TorusKnotGeometry } from 'three' export const props = { diff --git a/src/geometries/TubeGeometry.ts b/src/geometries/TubeGeometry.ts index 32ee58b..1cabd73 100644 --- a/src/geometries/TubeGeometry.ts +++ b/src/geometries/TubeGeometry.ts @@ -1,6 +1,6 @@ import { defineComponent } from 'vue' import { CatmullRomCurve3, Curve, TubeGeometry, Vector3 } from 'three' -import Geometry from './Geometry.js' +import Geometry from './Geometry' export const props = { points: Array, diff --git a/src/geometries/index.js b/src/geometries/index.ts similarity index 100% rename from src/geometries/index.js rename to src/geometries/index.ts