mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 06:29:30 -07:00
1 line
18 KiB
JSON
1 line
18 KiB
JSON
{"name":"FlyingPosters","title":"FlyingPosters","description":"3D posters rotate on scroll infinitely.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <div ref=\"containerRef\" :class=\"['w-full h-full overflow-hidden relative z-2', className]\" v-bind=\"$attrs\">\n <canvas ref=\"canvasRef\" class=\"block w-full h-full\" />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { Renderer, Camera, Transform, Plane, Program, Mesh, Texture, type OGLRenderingContext } from 'ogl';\n\ntype GL = OGLRenderingContext;\ntype OGLProgram = Program;\ntype OGLMesh = Mesh;\ntype OGLTransform = Transform;\ntype OGLPlane = Plane;\n\ninterface ScreenSize {\n width: number;\n height: number;\n}\n\ninterface ViewportSize {\n width: number;\n height: number;\n}\n\ninterface ScrollState {\n position?: number;\n ease: number;\n current: number;\n target: number;\n last: number;\n}\n\ninterface AutoBindOptions {\n include?: Array<string | RegExp>;\n exclude?: Array<string | RegExp>;\n}\n\ninterface MediaParams {\n gl: GL;\n geometry: OGLPlane;\n scene: OGLTransform;\n screen: ScreenSize;\n viewport: ViewportSize;\n image: string;\n length: number;\n index: number;\n planeWidth: number;\n planeHeight: number;\n distortion: number;\n}\n\ninterface CanvasParams {\n container: HTMLElement;\n canvas: HTMLCanvasElement;\n items: string[];\n planeWidth: number;\n planeHeight: number;\n distortion: number;\n scrollEase: number;\n cameraFov: number;\n cameraZ: number;\n}\n\nconst vertexShader = `\nprecision highp float;\n\nattribute vec3 position;\nattribute vec2 uv;\nattribute vec3 normal;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat3 normalMatrix;\n\nuniform float uPosition;\nuniform float uTime;\nuniform float uSpeed;\nuniform vec3 distortionAxis;\nuniform vec3 rotationAxis;\nuniform float uDistortion;\n\nvarying vec2 vUv;\nvarying vec3 vNormal;\n\nfloat PI = 3.141592653589793238;\nmat4 rotationMatrix(vec3 axis, float angle) {\n axis = normalize(axis);\n float s = sin(angle);\n float c = cos(angle);\n float oc = 1.0 - c;\n \n return mat4(\n oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,\n oc * axis.x * axis.y + axis.z * s,oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,\n oc * axis.z * axis.x - axis.y * s,oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,\n 0.0, 0.0, 0.0, 1.0\n );\n}\n\nvec3 rotate(vec3 v, vec3 axis, float angle) {\n mat4 m = rotationMatrix(axis, angle);\n return (m * vec4(v, 1.0)).xyz;\n}\n\nfloat qinticInOut(float t) {\n return t < 0.5\n ? 16.0 * pow(t, 5.0)\n : -0.5 * abs(pow(2.0 * t - 2.0, 5.0)) + 1.0;\n}\n\nvoid main() {\n vUv = uv;\n \n float norm = 0.5;\n vec3 newpos = position;\n float offset = (dot(distortionAxis, position) + norm / 2.) / norm;\n float localprogress = clamp(\n (fract(uPosition * 5.0 * 0.01) - 0.01 * uDistortion * offset) / (1. - 0.01 * uDistortion),\n 0.,\n 2.\n );\n localprogress = qinticInOut(localprogress) * PI;\n newpos = rotate(newpos, rotationAxis, localprogress);\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(newpos, 1.0);\n}\n`;\n\nconst fragmentShader = `\nprecision highp float;\n\nuniform vec2 uImageSize;\nuniform vec2 uPlaneSize;\nuniform sampler2D tMap;\n\nvarying vec2 vUv;\n\nvoid main() {\n vec2 imageSize = uImageSize;\n vec2 planeSize = uPlaneSize;\n\n float imageAspect = imageSize.x / imageSize.y;\n float planeAspect = planeSize.x / planeSize.y;\n vec2 scale = vec2(1.0, 1.0);\n\n if (planeAspect > imageAspect) {\n scale.x = imageAspect / planeAspect;\n } else {\n scale.y = planeAspect / imageAspect;\n }\n\n vec2 uv = vUv * scale + (1.0 - scale) * 0.5;\n\n gl_FragColor = texture2D(tMap, uv);\n}\n`;\n\ntype MethodNames<T> = {\n [K in keyof T]: T[K] extends (...args: unknown[]) => unknown ? K : never;\n}[keyof T];\n\nfunction AutoBind<T extends object>(self: T, { include, exclude }: AutoBindOptions = {}) {\n const getAllProperties = (object: object): Set<[object, string | symbol]> => {\n const properties = new Set<[object, string | symbol]>();\n let currentObject: object | null = object;\n do {\n for (const key of Reflect.ownKeys(currentObject)) {\n properties.add([currentObject, key]);\n }\n } while ((currentObject = Reflect.getPrototypeOf(currentObject)) && currentObject !== Object.prototype);\n return properties;\n };\n\n const filter = (key: string | symbol) => {\n const match = (pattern: string | RegExp) =>\n typeof pattern === 'string' ? key === pattern : (pattern as RegExp).test(key.toString());\n\n if (include) return include.some(match);\n if (exclude) return !exclude.some(match);\n return true;\n };\n\n const proto = Object.getPrototypeOf(self);\n if (!proto) return self;\n for (const [object, key] of getAllProperties(proto)) {\n if (key === 'constructor' || !filter(key)) continue;\n const descriptor = Reflect.getOwnPropertyDescriptor(object, key);\n if (descriptor && typeof descriptor.value === 'function' && typeof key === 'string') {\n const current = (self as Record<string, unknown>)[key];\n if (typeof current === 'function') {\n (self as Record<MethodNames<T>, unknown>)[key as MethodNames<T>] = (\n current as (...a: unknown[]) => unknown\n ).bind(self);\n }\n }\n }\n return self;\n}\n\nfunction lerp(p1: number, p2: number, t: number): number {\n return p1 + (p2 - p1) * t;\n}\n\nfunction map(num: number, min1: number, max1: number, min2: number, max2: number, round = false): number {\n const num1 = (num - min1) / (max1 - min1);\n const num2 = num1 * (max2 - min2) + min2;\n return round ? Math.round(num2) : num2;\n}\n\nclass Media {\n gl: GL;\n geometry: OGLPlane;\n scene: OGLTransform;\n screen: ScreenSize;\n viewport: ViewportSize;\n image: string;\n length: number;\n index: number;\n planeWidth: number;\n planeHeight: number;\n distortion: number;\n\n program!: OGLProgram;\n plane!: OGLMesh;\n extra = 0;\n padding = 0;\n height = 0;\n heightTotal = 0;\n y = 0;\n\n constructor({\n gl,\n geometry,\n scene,\n screen,\n viewport,\n image,\n length,\n index,\n planeWidth,\n planeHeight,\n distortion\n }: MediaParams) {\n this.gl = gl;\n this.geometry = geometry;\n this.scene = scene;\n this.screen = screen;\n this.viewport = viewport;\n this.image = image;\n this.length = length;\n this.index = index;\n this.planeWidth = planeWidth;\n this.planeHeight = planeHeight;\n this.distortion = distortion;\n\n this.createShader();\n this.createMesh();\n this.onResize();\n }\n\n createShader() {\n const texture = new Texture(this.gl, { generateMipmaps: false });\n this.program = new Program(this.gl, {\n depthTest: false,\n depthWrite: false,\n fragment: fragmentShader,\n vertex: vertexShader,\n uniforms: {\n tMap: { value: texture },\n uPosition: { value: 0 },\n uPlaneSize: { value: [0, 0] },\n uImageSize: { value: [0, 0] },\n uSpeed: { value: 0 },\n rotationAxis: { value: [0, 1, 0] },\n distortionAxis: { value: [1, 1, 0] },\n uDistortion: { value: this.distortion },\n uViewportSize: { value: [this.viewport.width, this.viewport.height] },\n uTime: { value: 0 }\n },\n cullFace: false\n });\n\n const img = new Image();\n img.crossOrigin = 'anonymous';\n img.src = this.image;\n img.onload = () => {\n texture.image = img;\n this.program.uniforms.uImageSize.value = [img.naturalWidth, img.naturalHeight];\n };\n }\n\n createMesh() {\n this.plane = new Mesh(this.gl, {\n geometry: this.geometry,\n program: this.program\n });\n this.plane.setParent(this.scene);\n }\n\n setScale() {\n this.plane.scale.x = (this.viewport.width * this.planeWidth) / this.screen.width;\n this.plane.scale.y = (this.viewport.height * this.planeHeight) / this.screen.height;\n this.plane.position.x = 0;\n this.program.uniforms.uPlaneSize.value = [this.plane.scale.x, this.plane.scale.y];\n }\n\n onResize({ screen, viewport }: { screen?: ScreenSize; viewport?: ViewportSize } = {}) {\n if (screen) this.screen = screen;\n if (viewport) {\n this.viewport = viewport;\n this.program.uniforms.uViewportSize.value = [viewport.width, viewport.height];\n }\n this.setScale();\n\n this.padding = 5;\n this.height = this.plane.scale.y + this.padding;\n this.heightTotal = this.height * this.length;\n this.y = -this.heightTotal / 2 + (this.index + 0.5) * this.height;\n }\n\n update(scroll: ScrollState) {\n this.plane.position.y = this.y - scroll.current - this.extra;\n const position = map(this.plane.position.y, -this.viewport.height, this.viewport.height, 5, 15);\n\n this.program.uniforms.uPosition.value = position;\n this.program.uniforms.uTime.value += 0.04;\n this.program.uniforms.uSpeed.value = scroll.current;\n\n const planeHeight = this.plane.scale.y;\n const viewportHeight = this.viewport.height;\n const topEdge = this.plane.position.y + planeHeight / 2;\n const bottomEdge = this.plane.position.y - planeHeight / 2;\n\n if (topEdge < -viewportHeight / 2) {\n this.extra -= this.heightTotal;\n } else if (bottomEdge > viewportHeight / 2) {\n this.extra += this.heightTotal;\n }\n }\n}\n\nclass Canvas {\n container: HTMLElement;\n canvas: HTMLCanvasElement;\n items: string[];\n planeWidth: number;\n planeHeight: number;\n distortion: number;\n scroll: ScrollState;\n cameraFov: number;\n cameraZ: number;\n\n renderer!: Renderer;\n gl!: GL;\n camera!: Camera;\n scene!: OGLTransform;\n planeGeometry!: OGLPlane;\n medias!: Media[];\n screen!: ScreenSize;\n viewport!: ViewportSize;\n isDown = false;\n start = 0;\n loaded = 0;\n\n constructor({\n container,\n canvas,\n items,\n planeWidth,\n planeHeight,\n distortion,\n scrollEase,\n cameraFov,\n cameraZ\n }: CanvasParams) {\n this.container = container;\n this.canvas = canvas;\n this.items = items;\n this.planeWidth = planeWidth;\n this.planeHeight = planeHeight;\n this.distortion = distortion;\n this.scroll = {\n ease: scrollEase,\n current: 0,\n target: 0,\n last: 0\n };\n this.cameraFov = cameraFov;\n this.cameraZ = cameraZ;\n\n AutoBind(this);\n this.createRenderer();\n this.createCamera();\n this.createScene();\n this.onResize();\n this.createGeometry();\n this.createMedias();\n this.initializeScrollPosition();\n this.update();\n this.addEventListeners();\n this.createPreloader();\n }\n\n createRenderer() {\n this.renderer = new Renderer({\n canvas: this.canvas,\n alpha: true,\n antialias: true,\n dpr: Math.min(window.devicePixelRatio, 2)\n });\n this.gl = this.renderer.gl;\n }\n\n createCamera() {\n this.camera = new Camera(this.gl);\n this.camera.fov = this.cameraFov;\n this.camera.position.z = this.cameraZ;\n }\n\n createScene() {\n this.scene = new Transform();\n }\n\n createGeometry() {\n this.planeGeometry = new Plane(this.gl, {\n heightSegments: 1,\n widthSegments: 100\n });\n }\n\n createMedias() {\n this.medias = this.items.map(\n (image, index) =>\n new Media({\n gl: this.gl,\n geometry: this.planeGeometry,\n scene: this.scene,\n screen: this.screen,\n viewport: this.viewport,\n image,\n length: this.items.length,\n index,\n planeWidth: this.planeWidth,\n planeHeight: this.planeHeight,\n distortion: this.distortion\n })\n );\n }\n\n initializeScrollPosition() {\n if (this.medias && this.medias.length > 0) {\n const centerIndex = Math.floor(this.medias.length / 2);\n const centerMedia = this.medias[centerIndex];\n this.scroll.current = centerMedia.y;\n this.scroll.target = centerMedia.y;\n }\n }\n\n createPreloader() {\n this.loaded = 0;\n this.items.forEach(src => {\n const image = new Image();\n image.crossOrigin = 'anonymous';\n image.src = src;\n image.onload = () => {\n if (++this.loaded === this.items.length) {\n document.documentElement.classList.remove('loading');\n document.documentElement.classList.add('loaded');\n }\n };\n });\n }\n\n onResize() {\n const rect = this.container.getBoundingClientRect();\n this.screen = { width: rect.width, height: rect.height };\n this.renderer.setSize(this.screen.width, this.screen.height);\n\n this.camera.perspective({\n aspect: this.gl.canvas.width / this.gl.canvas.height\n });\n\n const fov = (this.camera.fov * Math.PI) / 180;\n const height = 2 * Math.tan(fov / 2) * this.camera.position.z;\n const width = height * this.camera.aspect;\n this.viewport = { width, height };\n\n this.medias?.forEach(media => media.onResize({ screen: this.screen, viewport: this.viewport }));\n }\n\n onTouchDown(e: MouseEvent | TouchEvent) {\n this.isDown = true;\n this.scroll.position = this.scroll.current;\n this.start = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n }\n\n onTouchMove(e: MouseEvent | TouchEvent) {\n if (!this.isDown || !this.scroll.position) return;\n const y = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;\n const distance = (this.start - y) * 0.1;\n this.scroll.target = this.scroll.position + distance;\n }\n\n onTouchUp() {\n this.isDown = false;\n }\n\n onWheel(e: WheelEvent) {\n this.scroll.target += e.deltaY * 0.005;\n }\n\n update() {\n this.scroll.current = lerp(this.scroll.current, this.scroll.target, this.scroll.ease);\n this.medias?.forEach(media => media.update(this.scroll));\n this.renderer.render({ scene: this.scene, camera: this.camera });\n this.scroll.last = this.scroll.current;\n requestAnimationFrame(this.update);\n }\n\n addEventListeners() {\n window.addEventListener('resize', this.onResize);\n window.addEventListener('wheel', this.onWheel);\n window.addEventListener('mousedown', this.onTouchDown);\n window.addEventListener('mousemove', this.onTouchMove);\n window.addEventListener('mouseup', this.onTouchUp);\n window.addEventListener('touchstart', this.onTouchDown as EventListener);\n window.addEventListener('touchmove', this.onTouchMove as EventListener);\n window.addEventListener('touchend', this.onTouchUp as EventListener);\n }\n\n destroy() {\n window.removeEventListener('resize', this.onResize);\n window.removeEventListener('wheel', this.onWheel);\n window.removeEventListener('mousedown', this.onTouchDown);\n window.removeEventListener('mousemove', this.onTouchMove);\n window.removeEventListener('mouseup', this.onTouchUp);\n window.removeEventListener('touchstart', this.onTouchDown as EventListener);\n window.removeEventListener('touchmove', this.onTouchMove as EventListener);\n window.removeEventListener('touchend', this.onTouchUp as EventListener);\n }\n}\n\nexport interface FlyingPostersProps {\n items?: string[];\n planeWidth?: number;\n planeHeight?: number;\n distortion?: number;\n scrollEase?: number;\n cameraFov?: number;\n cameraZ?: number;\n className?: string;\n}\n\nexport { Canvas, Media };\n</script>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';\n\nconst props = withDefaults(defineProps<FlyingPostersProps>(), {\n items: () => [],\n planeWidth: 320,\n planeHeight: 320,\n distortion: 3,\n scrollEase: 0.01,\n cameraFov: 45,\n cameraZ: 20,\n className: ''\n});\n\nconst containerRef = useTemplateRef<HTMLDivElement>('containerRef');\nconst canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef');\nconst instanceRef = ref<Canvas | null>(null);\n\nconst initCanvas = () => {\n if (!containerRef.value || !canvasRef.value) return;\n\n instanceRef.value = new Canvas({\n container: containerRef.value,\n canvas: canvasRef.value,\n items: props.items,\n planeWidth: props.planeWidth,\n planeHeight: props.planeHeight,\n distortion: props.distortion,\n scrollEase: props.scrollEase,\n cameraFov: props.cameraFov,\n cameraZ: props.cameraZ\n });\n};\n\nconst destroyCanvas = () => {\n if (instanceRef.value) {\n instanceRef.value.destroy();\n instanceRef.value = null;\n }\n};\n\nconst handleWheel = (e: WheelEvent) => {\n e.preventDefault();\n if (instanceRef.value) {\n instanceRef.value.onWheel(e);\n }\n};\n\nconst handleTouchMove = (e: TouchEvent) => {\n e.preventDefault();\n};\n\nwatch(\n () => [\n props.items,\n props.planeWidth,\n props.planeHeight,\n props.distortion,\n props.scrollEase,\n props.cameraFov,\n props.cameraZ\n ],\n () => {\n destroyCanvas();\n initCanvas();\n },\n { deep: true }\n);\n\nonMounted(() => {\n initCanvas();\n\n if (canvasRef.value) {\n const canvasEl = canvasRef.value;\n canvasEl.addEventListener('wheel', handleWheel, { passive: false });\n canvasEl.addEventListener('touchmove', handleTouchMove, { passive: false });\n }\n});\n\nonUnmounted(() => {\n destroyCanvas();\n\n if (canvasRef.value) {\n const canvasEl = canvasRef.value;\n canvasEl.removeEventListener('wheel', handleWheel);\n canvasEl.removeEventListener('touchmove', handleTouchMove);\n }\n});\n</script>\n","path":"FlyingPosters/FlyingPosters.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[{"ecosystem":"js","name":"ogl","version":"^1.0.11"}],"devDependencies":[],"categories":["Components"]} |