Structure Flow

# 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<StructureFlowOptions> & { className?: string };
export function StructureFlowBackground({ className = "", ...props }: StructureFlowBackgroundProps) {
  const hostRef = useRef<HTMLDivElement>(null); const canvasRef = useRef<HTMLCanvasElement>(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, bounds.height); renderer.render(); };
    const tick = () => { renderer.render(); frame = visible && !document.hidden ? requestAnimationFrame(tick) : 0; };
    const resizeObserver = new ResizeObserver(resize); const intersection = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; if (visible && !frame) frame = requestAnimationFrame(tick); if (!visible && frame) cancelAnimationFrame(frame), frame = 0; });
    resizeObserver.observe(host); intersection.observe(host); resize(); frame = requestAnimationFrame(tick);
    return () => { if (frame) cancelAnimationFrame(frame); resizeObserver.disconnect(); intersection.disconnect(); renderer.dispose(); };
  }, []);
  const options = optionsRef.current;
  const mask = `linear-gradient(to bottom, transparent ${options.maskStart * 100}%, black ${options.maskSolid * 100}%, black 100%)`;
  return <div ref={hostRef} className={`threeui-background structure-flow${className ? ` ${className}` : ""}`} style={{ opacity: 0.8, WebkitMaskImage: mask, maskImage: mask }}><canvas ref={canvasRef} /></div>;
}

/* ===== src/shaders/structure-flow/StructureFlowCollection.tsx (tsx) ===== */
import { lazy, Suspense } from "react";

import type { DotMatrixBackgroundProps } from "../dot-matrix/DotMatrixBackground";
import type { EmeraldHorizonBackgroundProps } from "../emerald-horizon/EmeraldHorizonBackground";
import type { NeuformBatchEffectProps } from "../neuform-isolated/NeuformBatchEffects";
import type { NeuformCraftEffectProps } from "../neuform-isolated/NeuformCraftEffects";
import type { NeuformIsolatedEffectProps } from "../neuform-isolated/NeuformIsolatedEffects";
import type { OrbitalSphereBackgroundProps } from "../orbital-sphere/OrbitalSphereBackground";
import type { StructureFlowBackgroundProps } from "./StructureFlowBackground";

export const STRUCTURE_FLOW_VARIANTS = [
  "structure-flow",
  "emerald-horizon",
  "orbital-sphere",
  "dot-matrix",
  "expanse-field",
  "logic-core",
  "dimensional-field",
  "data-field",
  "topology-field",
  "nebula",
  "fluid-field",
  "ember-storm",
  "flux-vortex",
] as const;

export type StructureFlowVariant = (typeof STRUCTURE_FLOW_VARIANTS)[number];

type StructureVariantProps = StructureFlowBackgroundProps & { variant?: "structure-flow" };
type EmeraldVariantProps = EmeraldHorizonBackgroundProps & { variant: "emerald-horizon" };
type OrbitalVariantProps = OrbitalSphereBackgroundProps & { variant: "orbital-sphere" };
type DotMatrixVariantProps = DotMatrixBackgroundProps & { variant: "dot-matrix" };
type IsolatedVariantProps = NeuformIsolatedEffectProps & {
  variant: "expanse-field" | "logic-core" | "dimensional-field" | "data-field" | "topology-field";
};
type CraftVariantProps = NeuformCraftEffectProps & {
  variant: "nebula" | "fluid-field" | "ember-storm";
};
type FluxVariantProps = NeuformBatchEffectProps & { variant: "flux-vortex" };

export type StructureFlowCollectionProps =
  | StructureVariantProps
  | EmeraldVariantProps
  | OrbitalVariantProps
  | DotMatrixVariantProps
  | IsolatedVariantProps
  | CraftVariantProps
  | FluxVariantProps;

const StructureVariant = lazy(() =>
  import("./StructureFlowBackground").then((module) => ({ default: module.StructureFlowBackground })),
);
const EmeraldVariant = lazy(() =>
  import("../emerald-horizon/EmeraldHorizonBackground").then((module) => ({ default: module.EmeraldHorizonBackground })),
);
const OrbitalVariant = lazy(() =>
  import("../orbital-sphere/OrbitalSphereBackground").then((module) => ({ default: module.OrbitalSphereBackground })),
);
const DotMatrixVariant = lazy(() =>
  import("../dot-matrix/DotMatrixBackground").then((module) => ({ default: module.DotMatrixBackground })),
);
const ExpanseVariant = lazy(() =>
  import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.ExpanseField })),
);
const LogicCoreVariant = lazy(() =>
  import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.LogicCoreField })),
);
const DimensionalVariant = lazy(() =>
  import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.DimensionalField })),
);
const DataVariant = lazy(() =>
  import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.DataField })),
);
const TopologyVariant = lazy(() =>
  import("../neuform-isolated/NeuformIsolatedEffects").then((module) => ({ default: module.TopologyField })),
);
const NebulaVariant = lazy(() =>
  import("../neuform-isolated/NeuformCraftEffects").then((module) => ({ default: module.NebulaBackground })),
);
const FluidVariant = lazy(() =>
  import("../neuform-isolated/NeuformCraftEffects").then((module) => ({ default: module.FluidFieldBackground })),
);
const EmberVariant = lazy(() =>
  import("../neuform-isolated/NeuformCraftEffects").then((module) => ({ default: module.EmberStorm })),
);
const FluxVariant = lazy(() =>
  import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.FluxVortex })),
);

const FALLBACK = <div className="threeui-background" style={{ background: "#050607" }} />;

export function StructureFlowCollection(props: StructureFlowCollectionProps) {
  if (props.variant === "emerald-horizon") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><EmeraldVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "orbital-sphere") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><OrbitalVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "dot-matrix") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><DotMatrixVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "expanse-field") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><ExpanseVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "logic-core") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><LogicCoreVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "dimensional-field") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><DimensionalVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "data-field") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><DataVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "topology-field") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><TopologyVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "nebula") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><NebulaVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "fluid-field") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><FluidVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "ember-storm") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><EmberVariant {...variantProps} /></Suspense>;
  }
  if (props.variant === "flux-vortex") {
    const { variant: _variant, ...variantProps } = props;
    return <Suspense fallback={FALLBACK}><FluxVariant {...variantProps} /></Suspense>;
  }

  const { variant: _variant, ...variantProps } = props;
  return <Suspense fallback={FALLBACK}><StructureVariant {...variantProps} /></Suspense>;
}

/* ===== src/shaders/structure-flow/structureFlowRenderer.ts (typescript) ===== */
import * as THREE from "three128";

export type StructureFlowOptions = { speed: number; pointSize: number; opacity: number; maskStart: number; maskSolid: number };
export const STRUCTURE_FLOW_DEFAULTS: StructureFlowOptions = { speed: 1, pointSize: 0.08, opacity: 0.4, maskStart: 0.2, maskSolid: 0.5 };

export function createStructureFlowRenderer(canvas: HTMLCanvasElement, getOptions: () => StructureFlowOptions) {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
  camera.position.z = 30;
  camera.position.y = 5;
  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  const geometry = new THREE.BufferGeometry();
  const count = 15000;
  const positions = new Float32Array(count * 3);
  const radius = 25;
  for (let index = 0; index < count; index += 1) {
    const u = Math.random();
    Math.random(); // The canonical renderer sampled v even though it did not use it.
    const theta = u * 2 * Math.PI;
    const phi = Math.acos(Math.random() * 0.8 + 0.2);
    positions[index * 3] = radius * Math.sin(phi) * Math.cos(theta);
    positions[index * 3 + 1] = radius * Math.cos(phi) - 20;
    positions[index * 3 + 2] = radius * Math.sin(phi) * Math.sin(theta);
  }
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
  const material = new THREE.PointsMaterial({ size: 0.08, color: 0xffffff, transparent: true, opacity: 0.4, blending: THREE.AdditiveBlending, depthWrite: false });
  const particles = new THREE.Points(geometry, material);
  scene.add(particles);
  return {
    resize(width: number, height: number) {
      camera.aspect = width / Math.max(1, height);
      camera.updateProjectionMatrix();
      renderer.setSize(width, height, false);
    },
    render() {
      const options = getOptions();
      particles.rotation.y += 0.0008 * options.speed;
      particles.rotation.z += 0.0002 * options.speed;
      material.size = options.pointSize;
      material.opacity = options.opacity;
      renderer.render(scene, camera);
    },
    dispose() { geometry.dispose(); material.dispose(); renderer.dispose(); },
  };
}

/* ===== src/shaders/structure-flow/three128.d.ts (typescript) ===== */
declare module "three128" {
  const THREE: typeof import("three");
  export = THREE;
}