Laser

在云境TS 中打开并复制 →

内容预览

# Laser Four pointer-reactive laser scenes spanning a preserved matrix junction, atmospheric blade, vanishing array, and halftone relay. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/matrix-field · 预览动画：https://threeui.com/previews/matrix-field.webm > 分类：Backgrounds > 包含变体（3）：atmospheric-blade、vanishing-array、halftone-relay /* ===== src/shaders/laser/LaserCollection.tsx (tsx) ===== */ import { lazy, Suspense } from "react"; import type { NeuformBatchEffectProps } from "../neuform-isolated/NeuformBatchEffects"; import type { LaserVariantsProps, ThreeUILaserVariant } from "./LaserVariants"; export type LaserVariant = "matrix-field" | ThreeUILaserVariant; export type LaserCollectionProps = Omit & { variant?: LaserVariant; }; const MatrixField = lazy(() => import("../neuform-isolated/NeuformBatchEffects").then((module) => ({ default: module.MatrixField })), ); const ThreeUILaserVariantRenderer = lazy(() => import("./LaserVariants").then((module) => ({ default: module.LaserVariants })), ); const FALLBACK = ; export function LaserCollection({ variant = "matrix-field", ...props }: LaserCollectionProps) { if (variant !== "matrix-field") { const laserProps = props as LaserVariantsProps; return ( ); } return ( ); } /* ===== src/shaders/laser/LaserVariants.tsx (tsx) ===== */ import { useEffect, useRef, type CSSProperties } from "react"; import { LASER_FRAGMENT_SHADER, LASER_VERTEX_SHADER } from "./laserShaders"; exp

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