From 04890fc2fb0e1bc0e4d1341c8843285b10780732 Mon Sep 17 00:00:00 2001 From: Kevin Levron Date: Wed, 21 Apr 2021 21:05:02 +0200 Subject: [PATCH] wip --- src/components/liquid/LiquidEffect.js | 115 ++++++++++++------------ src/components/liquid/LiquidPlane.js | 2 +- src/components/meshes/Gem.js | 2 +- src/components/meshes/MirrorMesh.js | 2 +- src/components/meshes/RefractionMesh.js | 2 +- src/components/noisy/NoisyPlane.js | 2 +- src/components/sliders/Slider1.vue | 14 +-- src/components/sliders/Slider2.vue | 14 +-- src/components/sliders/ZoomBlurImage.js | 4 +- src/components/viewers/GLTFViewer.vue | 2 +- src/core/Camera.ts | 8 +- src/core/OrthographicCamera.ts | 2 +- src/core/PerspectiveCamera.ts | 2 +- src/core/Raycaster.ts | 23 +++-- src/core/Renderer.ts | 29 ++++-- src/core/Scene.ts | 11 ++- src/effects/BokehPass.ts | 10 +-- src/effects/EffectComposer.ts | 2 +- src/effects/FXAAPass.ts | 2 +- src/effects/HalftonePass.ts | 2 +- src/effects/RenderPass.ts | 6 +- src/effects/SMAAPass.ts | 3 +- src/effects/SSAOPass.ts | 12 +-- src/effects/UnrealBloomPass.ts | 2 +- src/geometries/Geometry.ts | 1 + src/geometries/TubeGeometry.ts | 2 +- src/materials/Material.ts | 2 + src/materials/StandardMaterial.ts | 2 + src/meshes/Box.ts | 6 +- src/meshes/Mesh.ts | 1 + src/meshes/Text.js | 69 -------------- src/meshes/Tube.ts | 4 +- src/plugin.ts | 1 + 33 files changed, 158 insertions(+), 203 deletions(-) delete mode 100644 src/meshes/Text.js diff --git a/src/components/liquid/LiquidEffect.js b/src/components/liquid/LiquidEffect.js index 080b858..7aa52a8 100644 --- a/src/components/liquid/LiquidEffect.js +++ b/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.width = 512; - this.height = 512; + this.renderer = renderer + this.width = 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.hMap1 = new WebGLRenderTarget(this.width, this.height, targetOptions); - this.fsQuad = new FullScreenQuad(); + this.hMap = new WebGLRenderTarget(this.width, this.height, targetOptions) + this.hMap1 = new WebGLRenderTarget(this.width, this.height, targetOptions) + 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.renderShaderMat(this.updateMat, this.hMap1); - this.swapBuffers(); -}; + this.updateMat.uniforms.tDiffuse.value = this.hMap.texture + this.renderShaderMat(this.updateMat, this.hMap1) + this.swapBuffers() +} LiquidEffect.prototype.updateHMapNormals = function () { - this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture; - this.renderShaderMat(this.normalsMat, this.hMap1); - this.swapBuffers(); -}; + this.normalsMat.uniforms.tDiffuse.value = this.hMap.texture + this.renderShaderMat(this.normalsMat, this.hMap1) + this.swapBuffers() +} LiquidEffect.prototype.addDrop = function (x, y, radius, strength) { - this.dropMat.uniforms.tDiffuse.value = this.hMap.texture; - this.dropMat.uniforms.center.value.set(x, y); - this.dropMat.uniforms.radius.value = radius; - this.dropMat.uniforms.strength.value = strength; - this.renderShaderMat(this.dropMat, this.hMap1); - this.swapBuffers(); -}; + this.dropMat.uniforms.tDiffuse.value = this.hMap.texture + this.dropMat.uniforms.center.value.set(x, y) + this.dropMat.uniforms.radius.value = radius + this.dropMat.uniforms.strength.value = strength + this.renderShaderMat(this.dropMat, this.hMap1) + 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; - const oldTarget = this.renderer.getRenderTarget(); - this.renderer.setRenderTarget(target); - this.fsQuad.render(this.renderer); - this.renderer.setRenderTarget(oldTarget); -}; + this.fsQuad.material = mat + const oldTarget = this.renderer.getRenderTarget() + this.renderer.setRenderTarget(target) + this.fsQuad.render(this.renderer) + this.renderer.setRenderTarget(oldTarget) +} LiquidEffect.prototype.swapBuffers = function () { - const temp = this.hMap; - this.hMap = this.hMap1; - this.hMap1 = temp; -}; + const temp = this.hMap + this.hMap = this.hMap1 + 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 geometry = new PlaneGeometry(2, 2); + const camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1) + 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; }, - set: function (value) { this._mesh.material = value; }, - }); + get: function () { return this._mesh.material }, + 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 diff --git a/src/components/liquid/LiquidPlane.js b/src/components/liquid/LiquidPlane.js index eb1a916..ae26a2b 100644 --- a/src/components/liquid/LiquidPlane.js +++ b/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); diff --git a/src/components/meshes/Gem.js b/src/components/meshes/Gem.js index cb26e92..d1c1322 100644 --- a/src/components/meshes/Gem.js +++ b/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; }, diff --git a/src/components/meshes/MirrorMesh.js b/src/components/meshes/MirrorMesh.js index c81980d..e62b862 100644 --- a/src/components/meshes/MirrorMesh.js +++ b/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; }, }, diff --git a/src/components/meshes/RefractionMesh.js b/src/components/meshes/RefractionMesh.js index 41fad69..3e942a9 100644 --- a/src/components/meshes/RefractionMesh.js +++ b/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; }, }, diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js index 51083cc..6b8010a 100644 --- a/src/components/noisy/NoisyPlane.js +++ b/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); diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue index bc91cae..f9be477 100644 --- a/src/components/sliders/Slider1.vue +++ b/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(); diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue index 859d383..44d3936 100644 --- a/src/components/sliders/Slider2.vue +++ b/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(); diff --git a/src/components/sliders/ZoomBlurImage.js b/src/components/sliders/ZoomBlurImage.js index a8d1323..cb7cdbe 100644 --- a/src/components/sliders/ZoomBlurImage.js +++ b/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); diff --git a/src/components/viewers/GLTFViewer.vue b/src/components/viewers/GLTFViewer.vue index 439521c..ee40629 100644 --- a/src/components/viewers/GLTFViewer.vue +++ b/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); }); }, }); diff --git a/src/core/Camera.ts b/src/core/Camera.ts index b24bfc3..8b188a0 100644 --- a/src/core/Camera.ts +++ b/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 - return { three } + const renderer = inject('renderer') as RendererInterface + return { renderer } }, render() { return this.$slots.default ? this.$slots.default() : [] diff --git a/src/core/OrthographicCamera.ts b/src/core/OrthographicCamera.ts index f66ea59..d9d4044 100644 --- a/src/core/OrthographicCamera.ts +++ b/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', }) diff --git a/src/core/PerspectiveCamera.ts b/src/core/PerspectiveCamera.ts index b37e2b5..708dfb1 100644 --- a/src/core/PerspectiveCamera.ts +++ b/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', }) diff --git a/src/core/Raycaster.ts b/src/core/Raycaster.ts index 464038e..e0c3d5d 100644 --- a/src/core/Raycaster.ts +++ b/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, three } + return { renderer } }, 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: ( this.onPointerEnter), - onIntersectOver: ( this.onPointerOver), - onIntersectMove: ( this.onPointerMove), - onIntersectLeave: ( this.onPointerLeave), - onIntersectClick: ( this.onClick), + onIntersectEnter: this.onPointerEnter, + onIntersectOver: this.onPointerOver, + onIntersectMove: this.onPointerMove, + onIntersectLeave: this.onPointerLeave, + onIntersectClick: this.onClick, }) this.pointer.addListeners() @@ -57,8 +54,8 @@ export default defineComponent({ }, methods: { getIntersectObjects() { - if (this.three.scene) { - const children = this.three.scene.children.filter((c: Object3D) => ['Mesh', 'InstancedMesh'].includes(c.type)) + if (this.renderer.scene) { + const children = this.renderer.scene.children.filter((c: Object3D) => ['Mesh', 'InstancedMesh'].includes(c.type)) return children as IntersectObject[] } return [] diff --git a/src/core/Renderer.ts b/src/core/Renderer.ts index f31ba42..18ff93e 100644 --- a/src/core/Renderer.ts +++ b/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 = (event?: T) => void +type CallbackType = (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, diff --git a/src/core/Scene.ts b/src/core/Scene.ts index 6f71a97..4a11178 100644 --- a/src/core/Scene.ts +++ b/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) { - this.three.scene = this.scene + if (!this.renderer.scene) { + this.renderer.scene = this.scene } }, methods: { diff --git a/src/effects/BokehPass.ts b/src/effects/BokehPass.ts index 4078a3e..649d8b9 100644 --- a/src/effects/BokehPass.ts +++ b/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, - height: this.three.size.height, + width: this.renderer.size.width, + 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 diff --git a/src/effects/EffectComposer.ts b/src/effects/EffectComposer.ts index caf3cd8..e6ea421 100644 --- a/src/effects/EffectComposer.ts +++ b/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', () => { diff --git a/src/effects/FXAAPass.ts b/src/effects/FXAAPass.ts index 342a153..9a925ec 100644 --- a/src/effects/FXAAPass.ts +++ b/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) diff --git a/src/effects/HalftonePass.ts b/src/effects/HalftonePass.ts index de15349..23c09db 100644 --- a/src/effects/HalftonePass.ts +++ b/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 diff --git a/src/effects/RenderPass.ts b/src/effects/RenderPass.ts index 52a3e94..f9e55bd 100644 --- a/src/effects/RenderPass.ts +++ b/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', diff --git a/src/effects/SMAAPass.ts b/src/effects/SMAAPass.ts index 7599fcb..5327af7 100644 --- a/src/effects/SMAAPass.ts +++ b/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.three.size.width, this.three.size.height) + const pass = new SMAAPass(this.renderer.size.width, this.renderer.size.height) this.initEffectPass(pass) }, __hmrId: 'SMAAPass', diff --git a/src/effects/SSAOPass.ts b/src/effects/SSAOPass.ts index bae76db..61c6f58 100644 --- a/src/effects/SSAOPass.ts +++ b/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.three.camera, - this.three.size.width, - this.three.size.height + this.renderer.scene, + this.renderer.camera, + this.renderer.size.width, + this.renderer.size.height ) Object.keys(this.options).forEach(key => { diff --git a/src/effects/UnrealBloomPass.ts b/src/effects/UnrealBloomPass.ts index 323d950..cf83aa6 100644 --- a/src/effects/UnrealBloomPass.ts +++ b/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 => { diff --git a/src/geometries/Geometry.ts b/src/geometries/Geometry.ts index 343b2a2..9c861f6 100644 --- a/src/geometries/Geometry.ts +++ b/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, diff --git a/src/geometries/TubeGeometry.ts b/src/geometries/TubeGeometry.ts index 1cabd73..5dada15 100644 --- a/src/geometries/TubeGeometry.ts +++ b/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) }, }, }) diff --git a/src/materials/Material.ts b/src/materials/Material.ts index 1934316..4201b20 100644 --- a/src/materials/Material.ts +++ b/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 } }) diff --git a/src/materials/StandardMaterial.ts b/src/materials/StandardMaterial.ts index 52f85b9..a01e30b 100644 --- a/src/materials/StandardMaterial.ts +++ b/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 } }) diff --git a/src/meshes/Box.ts b/src/meshes/Box.ts index b08729f..862fa2d 100644 --- a/src/meshes/Box.ts +++ b/src/meshes/Box.ts @@ -1,9 +1,11 @@ -import { defineComponent } from 'vue' -import Mesh, { defaultSetup, meshComponent } from './Mesh' +import { 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, diff --git a/src/meshes/Mesh.ts b/src/meshes/Mesh.ts index 577ae63..1e8b1f7 100644 --- a/src/meshes/Mesh.ts +++ b/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, diff --git a/src/meshes/Text.js b/src/meshes/Text.js deleted file mode 100644 index 67ead70..0000000 --- a/src/meshes/Text.js +++ /dev/null @@ -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(); - } - }, - }, -}); diff --git a/src/meshes/Tube.ts b/src/meshes/Tube.ts index 3daf8e2..67b07f5 100644 --- a/src/meshes/Tube.ts +++ b/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', diff --git a/src/plugin.ts b/src/plugin.ts index 334e668..663b76a 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -76,6 +76,7 @@ export const TroisJSVuePlugin = { ] comps.forEach(comp => { + // @ts-ignore app.component(comp, TROIS[comp]) }) },