wip

src/core/Renderer.ts

@@ -1,11 +1,30 @@
+import { WebGLRenderer } from 'three'
 import { defineComponent } from 'vue'
-import useThree, { ThreeConfigInterface } from './useThree'
+import useThree, { ThreeConfigInterface, ThreeInterface } from './useThree'
 
-interface RendererEventInterface {
+type CallbackType<T> = (e: T) => void
+
+interface EventInterface<T> {
+  renderer: T
 }
 
-// interface RendererEventListenerInterface {
-// }
+interface RenderEventInterface<T> extends EventInterface<T> {
+  time: number
+}
+
+export interface RendererInterface {
+  canvas: HTMLCanvasElement
+  three: ThreeInterface
+  renderer: WebGLRenderer
+  renderFn(): void
+  raf: boolean
+  onMountedCallbacks: CallbackType<EventInterface<this>>[]
+  beforeRenderCallbacks: CallbackType<RenderEventInterface<this>>[]
+  afterRenderCallbacks: CallbackType<RenderEventInterface<this>>[]
+}
+
+type MountedCallbackType = CallbackType<EventInterface<RendererInterface>>
+type RenderCallbackType = CallbackType<RenderEventInterface<RendererInterface>>
 
 export default defineComponent({
   name: 'Renderer',
@@ -21,9 +40,9 @@ export default defineComponent({
     height: String,
     xr: Boolean,
     onReady: Function,
-    onFrame: Function,
+    // onFrame: Function,
   },
-  setup(props) {
+  setup(props): RendererInterface {
     const canvas = document.createElement('canvas')
     const config: ThreeConfigInterface = {
       canvas,
@@ -81,7 +100,7 @@ export default defineComponent({
       }
     }
 
-    this.onMountedCallbacks.forEach(c => c())
+    this.onMountedCallbacks.forEach(c => c({ renderer: this }))
   },
   beforeUnmount() {
     this.canvas.remove()
@@ -115,7 +134,7 @@ export default defineComponent({
     render(time: number) {
       const cbParams = { time, renderer: this }
       this.beforeRenderCallbacks.forEach(cb => cb(cbParams))
-      this.onFrame?.(cbParams)
+      // this.onFrame?.(cbParams)
       this.renderFn()
       this.afterRenderCallbacks.forEach(cb => cb(cbParams))
     },
@@ -125,7 +144,6 @@ export default defineComponent({
     },
   },
   render() {
-    // return h('canvas', {}, this.$slots.default ? this.$slots.default() : [])
     return this.$slots.default ? this.$slots.default() : []
   },
   __hmrId: 'Renderer',

src/core/useThree.ts

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { createRenderer } from '@vue/runtime-core'
 import { Camera, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

src/meshes/Mesh.ts

@@ -14,7 +14,7 @@ export const pointerProps = {
   onClick: Function,
 }
 
-interface MeshInterface {
+export interface MeshInterface {
   three?: ThreeInterface
   mesh?: TMesh
   geometry?: BufferGeometry

src/models/FBX.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
-import Model from './Model.js'
+import Model from './Model'
 
 export default defineComponent({
   extends: Model,

src/models/GLTF.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-import Model from './Model.js'
+import Model from './Model'
 
 export default defineComponent({
   extends: Model,

src/shaders/TiltShift.ts

@@ -1,6 +1,6 @@
 // From https://github.com/evanw/glfx.js
-import { Vector2 } from 'three';
-import DefaultShader from './default';
+import { Vector2 } from 'three'
+import DefaultShader from './default'
 
 export default {
   uniforms: {
@@ -57,4 +57,4 @@ export default {
       gl_FragColor.rgb /= gl_FragColor.a + 0.00001;
     }
   `,
-};
+}

src/shaders/ZoomBlur.ts

@@ -1,6 +1,6 @@
 // From https://github.com/evanw/glfx.js
-import { Vector2 } from 'three';
-import DefaultShader from './default';
+import { Vector2 } from 'three'
+import DefaultShader from './default'
 
 export default {
   uniforms: {
@@ -46,4 +46,4 @@ export default {
       gl_FragColor.rgb /= gl_FragColor.a + 0.00001;
     }
   `,
-};
+}

src/shaders/default.ts

@@ -13,4 +13,4 @@ export default {
       gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
     }
   `,
-};
+}

src/tools.ts

@@ -9,7 +9,7 @@ export function setFromProp(o: Record<string, unknown>, prop: Record<string, unk
   }
 }
 
-export function bindProps(src: any, props: string[], dst: string): void {
+export function bindProps(src: any, props: string[], dst: any): void {
   props.forEach(prop => {
     bindProp(src, prop, dst, prop)
   })
@@ -27,7 +27,7 @@ export function bindProp(src: any, srcProp: string, dst: any, dstProp?: string):
   }
 }
 
-export function propsValues(props: Record<string, unknown>, exclude: string[]): Record<string, unknown> {
+export function propsValues(props: Record<string, unknown>, exclude: string[] = []): Record<string, unknown> {
   const values: Record<string, unknown> = {}
   Object.entries(props).forEach(([key, value]) => {
     if (!exclude || (exclude && !exclude.includes(key))) {
@@ -62,8 +62,9 @@ export function limit(val: number, min: number, max: number): number {
 
 // from https://github.com/pmndrs/drei/blob/master/src/useMatcapTexture.tsx
 const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d'
+const DEFAULT_MATCAP = '0404E8_0404B5_0404CB_3333FC'
 
-export function getMatcapUrl(hash: string, format = 1024): string {
+export function getMatcapUrl(hash = DEFAULT_MATCAP, format = 1024): string {
   const fileName = `${hash}${getMatcapFormatString(format)}.png`
   return `${MATCAP_ROOT}/${format}/${fileName}`
 }