Gallery

在云境TS 中打开并复制 →

内容预览

# Gallery The isolated Vantrix hero image ribbon: sixteen curved editorial panels orbiting a vertical cylindrical rail on a quiet paper grid. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/gallery · 预览动画：https://threeui.com/previews/gallery.webm > 分类：UI Elements /* ===== src/shaders/gallery/Gallery.tsx (tsx) ===== */ import { useEffect, useRef, type CSSProperties } from "react"; import * as THREE from "three"; import "./gallery.css"; const GALLERY_IMAGE_URLS = [ new URL("./assets/gallery-1.webp", import.meta.url).href, new URL("./assets/gallery-2.webp", import.meta.url).href, new URL("./assets/gallery-3.webp", import.meta.url).href, new URL("./assets/gallery-4.webp", import.meta.url).href, new URL("./assets/gallery-5.webp", import.meta.url).href, ] as const; export type GalleryProps = { speed?: number; scale?: number; opacity?: number; hue?: number; saturation?: number; brightness?: number; className?: string; style?: CSSProperties; }; export const GALLERY_DEFAULTS = { speed: 1, scale: 1, opacity: 1, hue: 0, saturation: 1, brightness: 1, } as const satisfies Required; function clamp(value: number, minimum: number, maximum: number) { return Math.min(maximum, Math.max(minimum, value)); } export function Gallery({ speed = GALLERY_DEFAULTS.speed, scale = GALLERY_DEFAULTS.scale, opacity = GALLERY_DEFAULTS.opacity, hue = GALLERY_DEFAULTS.hue, saturation = GALLERY_DEFAULTS.saturation, brightness = GALLERY_DEFAULT

……（完整源码请在站内查看）