From 98c892112abfdeb0c62ad34060d2cd368eb65059 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Mon, 19 Apr 2021 03:22:02 +0200 Subject: [PATCH] wip --- src/core/Renderer.ts | 36 ++++++++++++++++------ src/core/useThree.ts | 2 -- src/meshes/Mesh.ts | 2 +- src/models/FBX.ts | 2 +- src/models/GLTF.ts | 2 +- src/shaders/{TiltShift.js => TiltShift.ts} | 6 ++-- src/shaders/{ZoomBlur.js => ZoomBlur.ts} | 6 ++-- src/shaders/{default.js => default.ts} | 2 +- src/tools.ts | 7 +++-- 9 files changed, 41 insertions(+), 24 deletions(-) rename src/shaders/{TiltShift.js => TiltShift.ts} (96%) rename src/shaders/{ZoomBlur.js => ZoomBlur.ts} (94%) rename src/shaders/{default.js => default.ts} (99%) diff --git a/src/core/Renderer.ts b/src/core/Renderer.ts index 45b78d4..b13759d 100644 --- a/src/core/Renderer.ts +++ b/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 = (e: T) => void + +interface EventInterface { + renderer: T } -// interface RendererEventListenerInterface { -// } +interface RenderEventInterface extends EventInterface { + time: number +} + +export interface RendererInterface { + canvas: HTMLCanvasElement + three: ThreeInterface + renderer: WebGLRenderer + renderFn(): void + raf: boolean + onMountedCallbacks: CallbackType>[] + beforeRenderCallbacks: CallbackType>[] + afterRenderCallbacks: CallbackType>[] +} + +type MountedCallbackType = CallbackType> +type RenderCallbackType = CallbackType> 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', diff --git a/src/core/useThree.ts b/src/core/useThree.ts index bed343b..dffe90e 100644 --- a/src/core/useThree.ts +++ b/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' diff --git a/src/meshes/Mesh.ts b/src/meshes/Mesh.ts index 45613a9..2b9a0c2 100644 --- a/src/meshes/Mesh.ts +++ b/src/meshes/Mesh.ts @@ -14,7 +14,7 @@ export const pointerProps = { onClick: Function, } -interface MeshInterface { +export interface MeshInterface { three?: ThreeInterface mesh?: TMesh geometry?: BufferGeometry diff --git a/src/models/FBX.ts b/src/models/FBX.ts index 237a5de..80f2f0f 100644 --- a/src/models/FBX.ts +++ b/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, diff --git a/src/models/GLTF.ts b/src/models/GLTF.ts index 4f5b669..915f160 100644 --- a/src/models/GLTF.ts +++ b/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, diff --git a/src/shaders/TiltShift.js b/src/shaders/TiltShift.ts similarity index 96% rename from src/shaders/TiltShift.js rename to src/shaders/TiltShift.ts index 2566eb3..62e2c6a 100644 --- a/src/shaders/TiltShift.js +++ b/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; } `, -}; +} diff --git a/src/shaders/ZoomBlur.js b/src/shaders/ZoomBlur.ts similarity index 94% rename from src/shaders/ZoomBlur.js rename to src/shaders/ZoomBlur.ts index fcdf8d1..11d4d2e 100644 --- a/src/shaders/ZoomBlur.js +++ b/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; } `, -}; +} diff --git a/src/shaders/default.js b/src/shaders/default.ts similarity index 99% rename from src/shaders/default.js rename to src/shaders/default.ts index a4d2818..b39c25b 100644 --- a/src/shaders/default.js +++ b/src/shaders/default.ts @@ -13,4 +13,4 @@ export default { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } `, -}; +} diff --git a/src/tools.ts b/src/tools.ts index ffe5bb1..fd1c3ee 100644 --- a/src/tools.ts +++ b/src/tools.ts @@ -9,7 +9,7 @@ export function setFromProp(o: Record, prop: Record { 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, exclude: string[]): Record { +export function propsValues(props: Record, exclude: string[] = []): Record { const values: Record = {} 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}` }