diff --git a/src/core/Camera.ts b/src/core/Camera.ts index 727fcf1..7836a34 100644 --- a/src/core/Camera.ts +++ b/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() : [] }, diff --git a/src/core/OrthographicCamera.ts b/src/core/OrthographicCamera.ts index 2a3ba42..0d72c47 100644 --- a/src/core/OrthographicCamera.ts +++ b/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() }) diff --git a/src/core/PerspectiveCamera.ts b/src/core/PerspectiveCamera.ts index a0b1f2f..a353cc2 100644 --- a/src/core/PerspectiveCamera.ts +++ b/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() })