wip

src/components/liquid/LiquidEffect.js

@@ -8,16 +8,17 @@ import {
   ShaderMaterial,
   Uniform,
   Vector2,
+  WebGLRenderer,
   WebGLRenderTarget,
-} from 'three';
+} from 'three'
 
 // shaders from https://github.com/evanw/webgl-water
 function LiquidEffect(renderer) {
-  this.renderer = renderer;
+  this.renderer = renderer
-  this.width = 512;
+  this.width = 512
-  this.height = 512;
+  this.height = 512
   // this.delta = new Vector2(this.width / Math.pow(width, 2), this.height / Math.pow(height, 2));
-  this.delta = new Vector2(1 / this.width, 1 / this.height);
+  this.delta = new Vector2(1 / this.width, 1 / this.height)
 
   const targetOptions = {
     minFilter: NearestFilter,
@@ -25,14 +26,14 @@ function LiquidEffect(renderer) {
     type: FloatType,
     format: RGBAFormat,
     depthBuffer: false,
-  };
+  }
 
-  this.hMap = new WebGLRenderTarget(this.width, this.height, targetOptions);
+  this.hMap = new WebGLRenderTarget(this.width, this.height, targetOptions)
-  this.hMap1 = new WebGLRenderTarget(this.width, this.height, targetOptions);
+  this.hMap1 = new WebGLRenderTarget(this.width, this.height, targetOptions)
-  this.fsQuad = new FullScreenQuad();
+  this.fsQuad = new FullScreenQuad()
 
-  this.initShaders();
+  this.initShaders()
-};
+}
 
 LiquidEffect.prototype.initShaders = function () {
   const defaultVertexShader = `
@@ -41,7 +42,7 @@ LiquidEffect.prototype.initShaders = function () {
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     }
-  `;
+  `
 
   this.copyMat = new ShaderMaterial({
     uniforms: { tDiffuse: { value: null } },
@@ -53,7 +54,7 @@ LiquidEffect.prototype.initShaders = function () {
         gl_FragColor = texture2D(tDiffuse, vUv);
       }
     `,
-  });
+  })
 
   this.updateMat = new ShaderMaterial({
     uniforms: {
@@ -83,7 +84,7 @@ LiquidEffect.prototype.initShaders = function () {
         gl_FragColor = texel;
       }
     `,
-  });
+  })
 
   this.normalsMat = new ShaderMaterial({
     uniforms: {
@@ -103,7 +104,7 @@ LiquidEffect.prototype.initShaders = function () {
         gl_FragColor = texel;
       }
     `,
-  });
+  })
 
   this.dropMat = new ShaderMaterial({
     uniforms: {
@@ -129,35 +130,35 @@ LiquidEffect.prototype.initShaders = function () {
         gl_FragColor = texel;
       }
     `,
-  });
+  })
-};
+}
 
 LiquidEffect.prototype.update = function () {
-  this.updateHMap();
+  this.updateHMap()
   // this.updateHMap();
-  this.updateHMapNormals();
+  this.updateHMapNormals()
-};
+}
 
 LiquidEffect.prototype.updateHMap = function () {
-  this.updateMat.uniforms.tDiffuse.value = this.hMap.texture;
+  this.updateMat.uniforms.tDiffuse.value = this.hMap.texture
-  this.renderShaderMat(this.updateMat, this.hMap1);
+  this.renderShaderMat(this.updateMat, this.hMap1)
-  this.swapBuffers();
+  this.swapBuffers()
-};
+}
 
 LiquidEffect.prototype.updateHMapNormals = function () {
-  this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture;
+  this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture
-  this.renderShaderMat(this.normalsMat, this.hMap1);
+  this.renderShaderMat(this.normalsMat, this.hMap1)
-  this.swapBuffers();
+  this.swapBuffers()
-};
+}
 
 LiquidEffect.prototype.addDrop = function (x, y, radius, strength) {
-  this.dropMat.uniforms.tDiffuse.value = this.hMap.texture;
+  this.dropMat.uniforms.tDiffuse.value = this.hMap.texture
-  this.dropMat.uniforms.center.value.set(x, y);
+  this.dropMat.uniforms.center.value.set(x, y)
-  this.dropMat.uniforms.radius.value = radius;
+  this.dropMat.uniforms.radius.value = radius
-  this.dropMat.uniforms.strength.value = strength;
+  this.dropMat.uniforms.strength.value = strength
-  this.renderShaderMat(this.dropMat, this.hMap1);
+  this.renderShaderMat(this.dropMat, this.hMap1)
-  this.swapBuffers();
+  this.swapBuffers()
-};
+}
 
 // LiquidEffect.prototype.renderBuffer = function (buffer, target) {
 //   this.copyMat.uniforms.tDiffuse.value = buffer.texture;
@@ -165,40 +166,40 @@ LiquidEffect.prototype.addDrop = function (x, y, radius, strength) {
 // };
 
 LiquidEffect.prototype.renderShaderMat = function (mat, target) {
-  this.fsQuad.material = mat;
+  this.fsQuad.material = mat
-  const oldTarget = this.renderer.getRenderTarget();
+  const oldTarget = this.renderer.getRenderTarget()
-  this.renderer.setRenderTarget(target);
+  this.renderer.setRenderTarget(target)
-  this.fsQuad.render(this.renderer);
+  this.fsQuad.render(this.renderer)
-  this.renderer.setRenderTarget(oldTarget);
+  this.renderer.setRenderTarget(oldTarget)
-};
+}
 
 LiquidEffect.prototype.swapBuffers = function () {
-  const temp = this.hMap;
+  const temp = this.hMap
-  this.hMap = this.hMap1;
+  this.hMap = this.hMap1
-  this.hMap1 = temp;
+  this.hMap1 = temp
-};
+}
 
 // from https://threejs.org/examples/js/postprocessing/EffectComposer.js
 const FullScreenQuad = (function () {
-  const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
-  const geometry = new PlaneGeometry(2, 2);
+  const geometry = new PlaneGeometry(2, 2)
 
   const FullScreenQuad = function (material) {
-    this._mesh = new Mesh(geometry, material);
+    this._mesh = new Mesh(geometry, material)
-  };
+  }
 
   Object.defineProperty(FullScreenQuad.prototype, 'material', {
-    get: function () { return this._mesh.material; },
+    get: function () { return this._mesh.material },
-    set: function (value) { this._mesh.material = value; },
+    set: function (value) { this._mesh.material = value },
-  });
+  })
 
   Object.assign(FullScreenQuad.prototype, {
     render: function (renderer) {
-      renderer.render(this._mesh, camera);
+      renderer.render(this._mesh, camera)
     },
-  });
+  })
 
-  return FullScreenQuad;
+  return FullScreenQuad
-})();
+})()
 
-export default LiquidEffect;
+export default LiquidEffect

src/components/liquid/LiquidPlane.js

@@ -16,7 +16,7 @@ export default defineComponent({
     roughness: { type: Number, default: 0.25 },
   },
   mounted() {
-    this.liquidEffect = new LiquidEffect(this.three.renderer);
+    this.liquidEffect = new LiquidEffect(this.renderer.renderer);
     this.renderer.onMounted(() => {
       this.liquidEffect.renderer = this.renderer.renderer;
       this.renderer.onBeforeRender(this.update);

src/components/meshes/Gem.js

@@ -64,7 +64,7 @@ export default defineComponent({
     updateCubeRT() {
       this.mesh.visible = false;
       this.meshBack.visible = false;
-      this.cubeCamera.update(this.three.renderer, this.scene);
+      this.cubeCamera.update(this.renderer.renderer, this.scene);
       this.mesh.visible = true;
       this.meshBack.visible = true;
     },

src/components/meshes/MirrorMesh.js

@@ -35,7 +35,7 @@ export default defineComponent({
     },
     updateCubeRT() {
       this.mesh.visible = false;
-      this.cubeCamera.update(this.three.renderer, this.scene);
+      this.cubeCamera.update(this.renderer.renderer, this.scene);
       this.mesh.visible = true;
     },
   },

src/components/meshes/RefractionMesh.js

@@ -40,7 +40,7 @@ export default defineComponent({
     },
     updateCubeRT() {
       this.mesh.visible = false;
-      this.cubeCamera.update(this.three.renderer, this.scene);
+      this.cubeCamera.update(this.renderer.renderer, this.scene);
       this.mesh.visible = true;
     },
   },

src/components/noisy/NoisyPlane.js

@@ -117,7 +117,7 @@ export default defineComponent({
       this.renderMat(this.normMat, this.normRT);
     },
     renderMat(mat, target) {
-      const renderer = this.three.renderer;
+      const renderer = this.renderer.renderer;
       this.fsQuad.material = mat;
       const oldTarget = renderer.getRenderTarget();
       renderer.setRenderTarget(target);

src/components/sliders/Slider1.vue

@@ -45,7 +45,7 @@ export default defineComponent({
   },
   unmounted() {
     this.loader.dispose();
-    const domElement = this.three.renderer.domElement;
+    const domElement = this.renderer.renderer.domElement;
     domElement.removeEventListener('click', this.onClick);
     domElement.removeEventListener('wheel', this.onWheel);
     document.removeEventListener('keyup', this.onKeyup);
@@ -65,26 +65,26 @@ export default defineComponent({
         }
       );
 
-      const domElement = this.three.renderer.domElement;
+      const domElement = this.renderer.renderer.domElement;
       if (this.events.click) domElement.addEventListener('click', this.onClick);
       if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel);
       if (this.events.keyup) document.addEventListener('keyup', this.onKeyup);
       this.renderer.onBeforeRender(this.updateProgress);
-      this.renderer.onAfterResize(this.onResize);
+      this.renderer.onResize(this.onResize);
     },
     initScene() {
-      const renderer = this.three.renderer;
+      const renderer = this.renderer.renderer;
       const scene = this.$refs.scene.scene;
 
       this.plane1 = new AnimatedPlane({
-        renderer, screen: this.three.size,
+        renderer, screen: this.renderer.size,
         size: 10,
         anim: 1,
         texture: this.loader.textures[0],
       });
 
       this.plane2 = new AnimatedPlane({
-        renderer, screen: this.three.size,
+        renderer, screen: this.renderer.size,
         size: 10,
         anim: 2,
         texture: this.loader.textures[1],
@@ -109,7 +109,7 @@ export default defineComponent({
       }
     },
     onClick(e) {
-      if (e.clientY < this.three.size.height / 2) {
+      if (e.clientY < this.renderer.size.height / 2) {
         this.navPrevious();
       } else {
         this.navNext();

src/components/sliders/Slider2.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   },
   unmounted() {
     this.loader.dispose();
-    const domElement = this.three.renderer.domElement;
+    const domElement = this.renderer.renderer.domElement;
     domElement.removeEventListener('click', this.onClick);
     domElement.removeEventListener('wheel', this.onWheel);
     document.removeEventListener('keyup', this.onKeyup);
@@ -66,19 +66,19 @@ export default defineComponent({
         }
       );
 
-      const domElement = this.three.renderer.domElement;
+      const domElement = this.renderer.renderer.domElement;
       if (this.events.click) domElement.addEventListener('click', this.onClick);
       if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel);
       if (this.events.keyup) document.addEventListener('keyup', this.onKeyup);
       this.renderer.onBeforeRender(this.animate);
-      this.renderer.onAfterResize(this.onResize);
+      this.renderer.onResize(this.onResize);
     },
     initScene() {
       const scene = this.$refs.scene.scene;
 
-      this.image1 = new ZoomBlurImage(this.three);
+      this.image1 = new ZoomBlurImage(this.renderer);
       this.image1.setMap(this.loader.textures[0]);
-      this.image2 = new ZoomBlurImage(this.three);
+      this.image2 = new ZoomBlurImage(this.renderer);
       this.image2.setMap(this.loader.textures[1]);
       this.setImagesProgress(0);
 
@@ -86,7 +86,7 @@ export default defineComponent({
       scene.add(this.image2.mesh);
     },
     animate() {
-      const { positionN } = this.three.pointer;
+      const { positionN } = this.renderer.pointer;
       this.center.copy(positionN).divideScalar(2).addScalar(0.5);
       lerpv2(this.image1.uCenter.value, this.center, 0.1);
       lerpv2(this.image2.uCenter.value, this.center, 0.1);
@@ -106,7 +106,7 @@ export default defineComponent({
       }
     },
     onClick(e) {
-      if (e.clientY < this.three.size.height / 2) {
+      if (e.clientY < this.renderer.size.height / 2) {
         this.navPrevious();
       } else {
         this.navNext();

src/components/sliders/ZoomBlurImage.js

@@ -5,7 +5,7 @@ import {
   Vector2,
 } from 'three';
 
-export default function ZoomBlurImage(three) {
+export default function ZoomBlurImage(renderer) {
   let geometry, material, mesh;
 
   const uMap = { value: null };
@@ -94,7 +94,7 @@ export default function ZoomBlurImage(three) {
   }
 
   function updateUV() {
-    const ratio = three.size.ratio;
+    const ratio = renderer.size.ratio;
     const iRatio = uMap.value.image.width / uMap.value.image.height;
     uUVOffset.value.set(0, 0);
     uUVScale.value.set(1, 1);

src/components/viewers/GLTFViewer.vue

@@ -25,7 +25,7 @@ export default defineComponent({
 
     const loader = new GLTFLoader();
     loader.load(this.src, (gltf) => {
-      this.renderer.three.scene.add(gltf.scene);
+      this.renderer.scene.add(gltf.scene);
     });
   },
 });

src/core/Camera.ts

@@ -1,5 +1,5 @@
 import { defineComponent, inject } from 'vue'
-import { ThreeInterface } from './useThree'
+import { RendererInterface } from './Renderer'
 // import Object3D from './Object3D'
 
 export default defineComponent({
@@ -8,13 +8,13 @@ export default defineComponent({
 
   // don't work with typescript, bug ?
   // but works in sub components (injection, not typescript)
-  inject: ['three'],
+  inject: ['renderer'],
 
   setup() {
     // this works with typescript in sub component
     // but setup is not called
-    const three = inject('three') as ThreeInterface
+    const renderer = inject('renderer') as RendererInterface
-    return { three }
+    return { renderer }
   },
   render() {
     return this.$slots.default ? this.$slots.default() : []

src/core/OrthographicCamera.ts

@@ -34,7 +34,7 @@ export default defineComponent({
     return { camera }
   },
   created() {
-    this.three.camera = this.camera
+    this.renderer.camera = this.camera
   },
   __hmrId: 'OrthographicCamera',
 })

src/core/PerspectiveCamera.ts

@@ -36,7 +36,7 @@ export default defineComponent({
     return { camera }
   },
   created() {
-    this.three.camera = this.camera
+    this.renderer.camera = this.camera
   },
   __hmrId: 'PerspectiveCamera',
 })

src/core/Raycaster.ts

@@ -2,14 +2,12 @@ import { Object3D } from 'three'
 import { defineComponent, inject, PropType } from 'vue'
 import usePointer, { IntersectObject, PointerInterface, PointerIntersectCallbackType } from './usePointer'
 import { RendererInterface } from './Renderer'
-import { ThreeInterface } from './useThree'
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const emptyCallBack: PointerIntersectCallbackType = () => {}
 
 interface RaycasterSetupInterface {
   renderer: RendererInterface
-  three: ThreeInterface
   pointer?: PointerInterface
 }
 
@@ -25,22 +23,21 @@ export default defineComponent({
   },
   setup(): RaycasterSetupInterface {
     const renderer = inject('renderer') as RendererInterface
-    const three = inject('three') as ThreeInterface
+    return { renderer }
-    return { renderer, three }
   },
   mounted() {
     this.renderer.onMounted(() => {
-      if (!this.three.camera) return
+      if (!this.renderer.camera) return
 
       this.pointer = usePointer({
-        camera: this.three.camera,
+        camera: this.renderer.camera,
         domElement: this.renderer.canvas,
         intersectObjects: this.getIntersectObjects(),
-        onIntersectEnter: (<PointerIntersectCallbackType> this.onPointerEnter),
+        onIntersectEnter: this.onPointerEnter,
-        onIntersectOver: (<PointerIntersectCallbackType> this.onPointerOver),
+        onIntersectOver: this.onPointerOver,
-        onIntersectMove: (<PointerIntersectCallbackType> this.onPointerMove),
+        onIntersectMove: this.onPointerMove,
-        onIntersectLeave: (<PointerIntersectCallbackType> this.onPointerLeave),
+        onIntersectLeave: this.onPointerLeave,
-        onIntersectClick: (<PointerIntersectCallbackType> this.onClick),
+        onIntersectClick: this.onClick,
       })
       this.pointer.addListeners()
 
@@ -57,8 +54,8 @@ export default defineComponent({
   },
   methods: {
     getIntersectObjects() {
-      if (this.three.scene) {
+      if (this.renderer.scene) {
-        const children = this.three.scene.children.filter((c: Object3D) => ['Mesh', 'InstancedMesh'].includes(c.type))
+        const children = this.renderer.scene.children.filter((c: Object3D) => ['Mesh', 'InstancedMesh'].includes(c.type))
         return children as IntersectObject[]
       }
       return []

src/core/Renderer.ts

@@ -1,24 +1,25 @@
 /* eslint-disable no-use-before-define */
-import { WebGLRenderer } from 'three'
+import { Camera, Scene, WebGLRenderer } from 'three'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
 import { defineComponent, PropType } from 'vue'
 import useThree, { SizeInterface, ThreeConfigInterface, ThreeInterface } from './useThree'
 
-type CallbackType<T> = (event?: T) => void
+type CallbackType<T> = (event: T) => void
 
 // type EventType = 'init' | 'mounted' | 'beforerender' | 'afterrender' | 'resize'
 
-interface EventInterface {
+export interface EventInterface {
   type: 'init' | 'mounted'
   renderer: RendererInterface
 }
 
-interface RenderEventInterface {
+export interface RenderEventInterface {
   type: 'beforerender' | 'afterrender'
   renderer: RendererInterface
   time: number
 }
 
-interface ResizeEventInterface {
+export interface ResizeEventInterface {
   type: 'resize'
   renderer: RendererInterface
   size: SizeInterface
@@ -66,6 +67,10 @@ interface RendererSetupInterface {
 }
 
 export interface RendererInterface extends RendererSetupInterface {
+  scene?: Scene
+  camera?: Camera
+  composer?: EffectComposer
+
   onInit(cb: InitCallbackType): void
   onMounted(cb: MountedCallbackType): void
 
@@ -135,6 +140,20 @@ export default defineComponent({
       resizeCallbacks,
     }
   },
+  computed: {
+    camera: {
+      get: function(): Camera | undefined { return this.three.camera },
+      set: function(camera: Camera): void { this.three.camera = camera },
+    },
+    scene: {
+      get: function(): Scene | undefined { return this.three.scene },
+      set: function(scene: Scene): void { this.three.scene = scene },
+    },
+    composer: {
+      get: function(): EffectComposer | undefined { return this.three.composer },
+      set: function(composer: EffectComposer): void { this.three.composer = composer },
+    },
+  },
   provide() {
     return {
       renderer: this,

src/core/Scene.ts

@@ -1,22 +1,21 @@
 import { defineComponent, inject, watch } from 'vue'
 import { Scene, Color, Object3D } from 'three'
-import { ThreeInterface } from './useThree'
+import { RendererInterface } from './Renderer'
 
 export default defineComponent({
   name: 'Scene',
-  // inject: ['three'],
   props: {
     // id: String,
     background: [String, Number],
   },
   setup(props) {
-    const three = inject('three') as ThreeInterface
+    const renderer = inject('renderer') as RendererInterface
     const scene = new Scene()
     if (props.background) {
       scene.background = new Color(props.background)
     }
     watch(() => props.background, (value) => { if (scene.background instanceof Color && value) scene.background.set(value) })
-    return { three, scene }
+    return { renderer, scene }
   },
   provide() {
     return {
@@ -24,8 +23,8 @@ export default defineComponent({
     }
   },
   created() {
-    if (!this.three.scene) {
+    if (!this.renderer.scene) {
-      this.three.scene = this.scene
+      this.renderer.scene = this.scene
     }
   },
   methods: {

src/effects/BokehPass.ts

@@ -12,11 +12,11 @@ export default defineComponent({
   extends: EffectPass,
   props,
   created() {
-    if (!this.three.scene) {
+    if (!this.renderer.scene) {
       console.error('Missing Scene')
       return
     }
-    if (!this.three.camera) {
+    if (!this.renderer.camera) {
       console.error('Missing Camera')
       return
     }
@@ -25,11 +25,11 @@ export default defineComponent({
       focus: this.focus,
       aperture: this.aperture,
       maxblur: this.maxblur,
-      width: this.three.size.width,
+      width: this.renderer.size.width,
-      height: this.three.size.height,
+      height: this.renderer.size.height,
     }
 
-    const pass = new BokehPass(this.three.scene, this.three.camera, params)
+    const pass = new BokehPass(this.renderer.scene, this.renderer.camera, params)
 
     Object.keys(props).forEach(p => {
       // @ts-ignore

src/effects/EffectComposer.ts

@@ -28,7 +28,7 @@ export default defineComponent({
   created() {
     const composer = new EffectComposer(this.renderer.renderer)
     this.composer = composer
-    this.renderer.three.composer = composer
+    this.renderer.composer = composer
 
     // this.renderer.onInit(() => {
     this.renderer.addListener('init', () => {

src/effects/FXAAPass.ts

@@ -9,7 +9,7 @@ export default defineComponent({
   created() {
     const pass = new ShaderPass(FXAAShader)
 
-    // resize will be called in three init
+    // resize will be first called in renderer init
     this.renderer.addListener('resize', this.resize)
 
     this.initEffectPass(pass)

src/effects/HalftonePass.ts

@@ -15,7 +15,7 @@ export default defineComponent({
   extends: EffectPass,
   props,
   created() {
-    const pass = new HalftonePass(this.three.size.width, this.three.size.height, {})
+    const pass = new HalftonePass(this.renderer.size.width, this.renderer.size.height, {})
 
     Object.keys(props).forEach(p => {
       // @ts-ignore

src/effects/RenderPass.ts

@@ -5,15 +5,15 @@ import EffectPass from './EffectPass'
 export default defineComponent({
   extends: EffectPass,
   created() {
-    if (!this.three.scene) {
+    if (!this.renderer.scene) {
       console.error('Missing Scene')
       return
     }
-    if (!this.three.camera) {
+    if (!this.renderer.camera) {
       console.error('Missing Camera')
       return
     }
-    const pass = new RenderPass(this.three.scene, this.three.camera)
+    const pass = new RenderPass(this.renderer.scene, this.renderer.camera)
     this.initEffectPass(pass)
   },
   __hmrId: 'RenderPass',

src/effects/SMAAPass.ts

@@ -5,8 +5,7 @@ import EffectPass from './EffectPass'
 export default defineComponent({
   extends: EffectPass,
   created() {
-    // three size is not set yet, but this pass will be resized by effect composer
+    const pass = new SMAAPass(this.renderer.size.width, this.renderer.size.height)
-    const pass = new SMAAPass(this.three.size.width, this.three.size.height)
     this.initEffectPass(pass)
   },
   __hmrId: 'SMAAPass',

src/effects/SSAOPass.ts

@@ -11,20 +11,20 @@ export default defineComponent({
     },
   },
   created() {
-    if (!this.three.scene) {
+    if (!this.renderer.scene) {
       console.error('Missing Scene')
       return
     }
-    if (!this.three.camera) {
+    if (!this.renderer.camera) {
       console.error('Missing Camera')
       return
     }
 
     const pass = new SSAOPass(
-      this.three.scene,
+      this.renderer.scene,
-      this.three.camera,
+      this.renderer.camera,
-      this.three.size.width,
+      this.renderer.size.width,
-      this.three.size.height
+      this.renderer.size.height
     )
 
     Object.keys(this.options).forEach(key => {

src/effects/UnrealBloomPass.ts

@@ -13,7 +13,7 @@ export default defineComponent({
   extends: EffectPass,
   props,
   created() {
-    const size = new Vector2(this.three.size.width, this.three.size.height)
+    const size = new Vector2(this.renderer.size.width, this.renderer.size.height)
     const pass = new UnrealBloomPass(size, this.strength, this.radius, this.threshold)
 
     Object.keys(props).forEach(p => {

src/geometries/Geometry.ts

@@ -71,6 +71,7 @@ const Geometry = defineComponent({
 
 export default Geometry
 
+// @ts-ignore
 export function geometryComponent(name, props, createGeometry) {
   return defineComponent({
     name,

src/geometries/TubeGeometry.ts

@@ -32,7 +32,7 @@ export default defineComponent({
     },
     // update points (without using prop, faster)
     updatePoints(points: Vector3[]) {
-      updateTubeGeometryPoints(this.geometry, points)
+      updateTubeGeometryPoints(this.geometry as TubeGeometry, points)
     },
   },
 })

src/materials/Material.ts

@@ -64,8 +64,10 @@ export default defineComponent({
         // @ts-ignore
         watch(() => this[p], (value) => {
           if (p === 'color') {
+            // @ts-ignore
             this.material.color.set(value)
           } else {
+            // @ts-ignore
             this.material[p] = value
           }
         })

src/materials/StandardMaterial.ts

@@ -32,10 +32,12 @@ export default defineComponent({
       // TODO : use setProp, handle flatShading ?
       Object.keys(props).forEach(p => {
         if (p === 'normalScale') return
+        // @ts-ignore
         watch(() => this[p], (value) => {
           if (p === 'emissive') {
             material[p].set(value)
           } else {
+            // @ts-ignore
             material[p] = value
           }
         })

src/meshes/Box.ts

@@ -1,9 +1,11 @@
-import { defineComponent } from 'vue'
+import { meshComponent } from './Mesh'
-import Mesh, { defaultSetup, meshComponent } from './Mesh'
 import { props, createGeometry } from '../geometries/BoxGeometry'
 
 export default meshComponent('Box', props, createGeometry)
 
+// import { defineComponent } from 'vue'
+// import Mesh, { meshComponent } from './Mesh'
+//
 // export default defineComponent({
 //   extends: Mesh,
 //   props,

src/meshes/Mesh.ts

@@ -101,6 +101,7 @@ const Mesh = defineComponent({
 
 export default Mesh
 
+// @ts-ignore
 export function meshComponent(name, props, createGeometry) {
   return defineComponent({
     name,

src/meshes/Text.js

@@ -1,69 +0,0 @@
-import { defineComponent, watch } from 'vue';
-import { FontLoader, TextGeometry } from 'three';
-import Mesh from './Mesh.js';
-
-const props = {
-  text: String,
-  fontSrc: String,
-  size: { type: Number, default: 80 },
-  height: { type: Number, default: 5 },
-  depth: { type: Number, default: 1 },
-  curveSegments: { type: Number, default: 12 },
-  bevelEnabled: { type: Boolean, default: false },
-  bevelThickness: { type: Number, default: 10 },
-  bevelSize: { type: Number, default: 8 },
-  bevelOffset: { type: Number, default: 0 },
-  bevelSegments: { type: Number, default: 5 },
-  align: { type: [Boolean, String], default: false },
-};
-
-export default defineComponent({
-  extends: Mesh,
-  props,
-  data() {
-    return {
-      loading: true,
-    };
-  },
-  created() {
-    // add watchers
-    const watchProps = [
-      'text', 'size', 'height', 'curveSegments',
-      'bevelEnabled', 'bevelThickness', 'bevelSize', 'bevelOffset', 'bevelSegments',
-      'align',
-    ];
-    watchProps.forEach(p => {
-      watch(() => this[p], () => {
-        if (this.font) this.refreshGeometry();
-      });
-    });
-
-    const loader = new FontLoader();
-    loader.load(this.fontSrc, (font) => {
-      this.loading = false;
-      this.font = font;
-      this.createGeometry();
-      this.initMesh();
-    });
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = new TextGeometry(this.text, {
-        font: this.font,
-        size: this.size,
-        height: this.height,
-        depth: this.depth,
-        curveSegments: this.curveSegments,
-        bevelEnabled: this.bevelEnabled,
-        bevelThickness: this.bevelThickness,
-        bevelSize: this.bevelSize,
-        bevelOffset: this.bevelOffset,
-        bevelSegments: this.bevelSegments,
-      });
-
-      if (this.align === 'center') {
-        this.geometry.center();
-      }
-    },
-  },
-});

src/meshes/Tube.ts

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue'
+import { TubeGeometry, Vector3 } from 'three'
 import Mesh from './Mesh'
 import { props, createGeometry, updateTubeGeometryPoints } from '../geometries/TubeGeometry'
-import { Vector3 } from 'three'
 
 export default defineComponent({
   extends: Mesh,
@@ -16,7 +16,7 @@ export default defineComponent({
     },
     // update curve points (without using prop, faster)
     updatePoints(points: Vector3[]) {
-      updateTubeGeometryPoints(this.geometry, points)
+      updateTubeGeometryPoints(this.geometry as TubeGeometry, points)
     },
   },
   __hmrId: 'Tube',

src/plugin.ts

@@ -76,6 +76,7 @@ export const TroisJSVuePlugin = {
     ]
 
     comps.forEach(comp => {
+      // @ts-ignore
       app.component(comp, TROIS[comp])
     })
   },