Structure Flow
ThreeUI · Three.js · 免费
在云境TS 中打开并复制 →
内容预览
# Structure Flow Thirteen authored Three.js field studies collected as one family, spanning particle domes, horizons, orbital systems, matrices, topology, fluid fields, embers, and vortexes. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/structure-flow · 预览动画：https://threeui.com/previews/structure-flow.webm > 分类：Three.js > 包含变体（12）：emerald-horizon、orbital-sphere、dot-matrix、expanse-field、logic-core、dimensional-field、data-field、topology-field、nebula、fluid-field、ember-storm、flux-vortex /* ===== src/shaders/structure-flow/StructureFlowBackground.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { createStructureFlowRenderer, STRUCTURE_FLOW_DEFAULTS, type StructureFlowOptions } from "./structureFlowRenderer"; export type StructureFlowBackgroundProps = Partial & { className?: string }; export function StructureFlowBackground({ className = "", ...props }: StructureFlowBackgroundProps) { const hostRef = useRef(null); const canvasRef = useRef(null); const optionsRef = useRef({ ...STRUCTURE_FLOW_DEFAULTS, ...props }); optionsRef.current = { ...STRUCTURE_FLOW_DEFAULTS, ...props }; useEffect(() => { const host = hostRef.current, canvas = canvasRef.current; if (!host || !canvas) return undefined; const renderer = createStructureFlowRenderer(canvas, () => optionsRef.current); let frame = 0, visible = true; const resize = () => { const bounds = host.getBoundingClientRect(); renderer.resize(bounds.width
……（完整源码请在站内查看）