Liquid Form

在云境TS 中打开并复制 →

内容预览

# Liquid Form A centered silver ray-marched liquid form with authored studio reflections and pointer-responsive camera drift. > 来源：ThreeUI Community · https://threeui.com · MIT License（Meng To / Design+Code） > 组件页：https://threeui.com/component/liquid-form · 预览动画：https://threeui.com/previews/liquid-form.webm > 分类：Backgrounds /* ===== src/shaders/liquid-form/LiquidFormBackground.tsx (tsx) ===== */ import { useEffect, useRef } from "react"; import { VELOX_FRAGMENT_SHADER, VELOX_VERTEX_SHADER } from "./liquidFormShaders"; export type LiquidFormBackgroundProps = { speed?: number; morph?: number; noiseScale?: number; mouseAmount?: number; metal?: number; camera?: number; tintHue?: number; tintAmount?: number; className?: string; }; export const LIQUID_FORM_DEFAULTS = { speed: 1, morph: 1, noiseScale: 1, mouseAmount: 0.15, metal: 1, camera: 5.5, tintHue: 220, tintAmount: 0 } as const; function compile(gl: WebGLRenderingContext, type: number, source: string) { const shader = gl.createShader(type); if (!shader) throw new Error("Unable to create Velox shader"); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader) ?? "Velox shader compilation failed"); return shader; } export function LiquidFormBackground({ className = "", ...props }: LiquidFormBackgroundProps) { const hostRef = useRef(null); const canvasRef = useRef(null); const optionsRef = useRef({ ...LIQUID_FORM_DEFAULTS, ...prop

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