wip: camera

src/core/Camera.ts

@@ -1,11 +1,20 @@
-import { defineComponent } from 'vue'
-// import Object3D from '../core/Object3D'
+import { Camera } from 'three'
+import { defineComponent, inject } from 'vue'
+// import Object3D from './Object3D'
+
+interface ThreeInterface {
+  camera?: Camera
+}
 
 export default defineComponent({
-  // TODO: eventually extend Object3D, for now: error 'injection "scene" not found'
-  // because camera is a sibling of scene in Trois
+  // TODO: eventually extend Object3D
   // extends: Object3D,
-  inject: ['three'],
+  // inject: ['three'], // don't work with typescript, bug ?
+  setup() {
+    // this works in sub component ??
+    const three = inject('three') as ThreeInterface
+    return { three }
+  },
   render() {
     return this.$slots.default ? this.$slots.default() : []
   },

src/core/OrthographicCamera.ts

@@ -6,6 +6,7 @@ import Camera from './Camera'
 export default defineComponent({
   extends: Camera,
   name: 'OrthographicCamera',
+  inject: ['three'],
   props: {
     left: { type: Number, default: -1 },
     right: { type: Number, default: 1 },
@@ -23,7 +24,9 @@ export default defineComponent({
 
     const watchProps = ['left', 'right', 'top', 'bottom', 'near', 'far', 'zoom']
     watchProps.forEach(p => {
+      // @ts-ignore
       watch(() => props[p], (value) => {
+        // @ts-ignore
         camera[p] = value
         camera.updateProjectionMatrix()
       })

src/core/PerspectiveCamera.ts

@@ -26,7 +26,9 @@ export default defineComponent({
 
     const watchProps = ['aspect', 'far', 'fov', 'near']
     watchProps.forEach(p => {
+      // @ts-ignore
       watch(() => props[p], (value) => {
+        // @ts-ignore
         camera[p] = value
         camera.updateProjectionMatrix()
       })