wip: geometries

src/geometries/BoxGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { BoxGeometry } from 'three'
 
 export const props = {

src/geometries/CircleGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { CircleGeometry } from 'three'
 
 export const props = {

src/geometries/ConeGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { ConeGeometry } from 'three'
 
 export const props = {

src/geometries/CylinderGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { CylinderGeometry } from 'three'
 
 export const props = {

src/geometries/DodecahedronGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { DodecahedronGeometry } from 'three'
 
 export const props = {

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.rotateX) this.geometry?.rotateX(this.rotateX)
-      if (this.rotateY) this.geometry.rotateY(this.rotateY)
+      if (this.rotateY) this.geometry?.rotateY(this.rotateY)
-      if (this.rotateZ) this.geometry.rotateZ(this.rotateZ)
+      if (this.rotateZ) this.geometry?.rotateZ(this.rotateZ)
     },
     refreshGeometry() {
       const oldGeo = this.geometry
       this.createGeometry()
       this.rotateGeometry()
-      this.mesh.setGeometry(this.geometry)
+      if (this.geometry) this.mesh?.setGeometry(this.geometry)
-      oldGeo.dispose()
+      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,
   })
 }

src/geometries/IcosahedronGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { IcosahedronGeometry } from 'three'
 
 export const props = {

src/geometries/LatheGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { LatheGeometry } from 'three'
 
 export const props = {

src/geometries/OctahedronGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { OctahedronGeometry } from 'three'
 
 export const props = {

src/geometries/PlaneGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { PlaneGeometry } from 'three'
 
 export const props = {

src/geometries/PolyhedronGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { PolyhedronGeometry } from 'three'
 
 export const props = {

src/geometries/RingGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { RingGeometry } from 'three'
 
 export const props = {

src/geometries/SphereGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { SphereGeometry } from 'three'
 
 export const props = {

src/geometries/TetrahedronGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TetrahedronGeometry } from 'three'
 
 export const props = {

src/geometries/TorusGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TorusGeometry } from 'three'
 
 export const props = {

src/geometries/TorusKnotGeometry.ts

@@ -1,4 +1,4 @@
-import { geometryComponent } from './Geometry.js'
+import { geometryComponent } from './Geometry'
 import { TorusKnotGeometry } from 'three'
 
 export const props = {

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,