Warp Field
ThreeUI · Three.js · 免费
在云境TS 中打开并复制 →
内容预览
# Warp Field Nexus’s focused hero warp: 400 emerald additive streaks and 40 luminous tiles streaming through an authored deep-space fog field. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/warp-field · 预览动画：https://threeui.com/previews/warp-field.webm > 分类：Three.js > 包含变体（4）：streaks、letters、keycaps、hyperspace /* ===== src/shaders/warp-field/WarpFieldBackground.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { createWarpFieldRenderer, WARP_FIELD_DEFAULTS, type WarpFieldOptions } from "./warpFieldRenderer"; export type WarpFieldBackgroundProps = Partial & { className?: string }; export function WarpFieldBackground({ className = "", ...props }: WarpFieldBackgroundProps) { const hostRef = useRef(null), canvasRef = useRef(null), optionsRef = useRef({ ...WARP_FIELD_DEFAULTS, ...props }); optionsRef.current = { ...WARP_FIELD_DEFAULTS, ...props }; useEffect(() => { const host = hostRef.current, canvas = canvasRef.current; if (!host || !canvas) return undefined; const renderer = createWarpFieldRenderer(canvas, () => optionsRef.current); let frame = 0, visible = true; const resize = () => { const bounds = host.getBoundingClientRect(); renderer.resize(bounds.width, bounds.height); renderer.render(); }, tick = () => { renderer.render(); frame = visible && !document.hidden ? requestAnimationFrame(tick) : 0; }; const resizeObserver = new ResizeObserver(resize), intersection = new IntersectionObserv
……（完整源码请在站内查看）