64 lines
4.2 KiB
TypeScript
64 lines
4.2 KiB
TypeScript
'use client';
|
||
|
||
import { ShaderGradient, ShaderGradientCanvas } from '@shadergradient/react';
|
||
import React from 'react';
|
||
|
||
const ShaderBackground: React.FC<React.ComponentProps<'div'>> = ({ style, ...props }) => {
|
||
return (
|
||
<ShaderGradientCanvas
|
||
style={{
|
||
position: 'absolute',
|
||
top: 0,
|
||
width: '100vw',
|
||
height: '100vh',
|
||
pointerEvents: 'none',
|
||
}}
|
||
>
|
||
{/*<ShaderGradient
|
||
control="props" // 使用 props 模式，直接通过属性配置渐变参数
|
||
animate="on" // 控制渐变是否动画化（"on" 表示启用动画）
|
||
axesHelper="on" // 是否显示坐标轴辅助线，用于调试（"on" 表示显示）
|
||
bgColor1="#ECEFF4" // 背景颜色 1，用于渐变的背景色调
|
||
bgColor2="#ECEFF4" // 背景颜色 2，用于渐变的背景色调
|
||
brightness={1} // 亮度级别，控制整体渐变的明亮程度
|
||
cAzimuthAngle={1} // 相机方位角，控制相机围绕目标的水平旋转角度
|
||
cDistance={6} // 相机距离，控制相机到目标的距离
|
||
cPolarAngle={90} // 相机极角，控制相机围绕目标的垂直旋转角度
|
||
cameraZoom={15} // 相机缩放级别，控制相机的放大倍数
|
||
color1="#021033" // 渐变颜色 1，第一种主要颜色
|
||
color2="#ECEFF4" // 渐变颜色 2，第二种主要颜色
|
||
color3="#4E5C78" // 渐变颜色 3，第三种主要颜色
|
||
envPreset="city" // 环境预设，设置背景环境贴图（如 "city" 表示城市环境）
|
||
fov={45} // 视场角度（Field of View），控制相机视野宽度（度数）
|
||
grain="off" // 颗粒效果，是否添加噪点（"off" 表示关闭）
|
||
lightType="3d" // 灯光类型，设置照明模式（如 "3d" 表示 3D 灯光）
|
||
pixelDensity={1} // 像素密度，控制渲染质量（越高越清晰，但性能消耗更大）
|
||
positionX={0} // X 轴位置，控制渐变网格的 X 坐标
|
||
positionY={0} // Y 轴位置，控制渐变网格的 Y 坐标
|
||
positionZ={5} // Z 轴位置，控制渐变网格的 Z 坐标
|
||
reflection={1} // 反射强度，控制渐变的反射效果
|
||
rotationX={0} // X 轴旋转，控制渐变网格的 X 轴旋转角度
|
||
rotationY={0} // Y 轴旋转，控制渐变网格的 Y 轴旋转角度
|
||
rotationZ={0} // Z 轴旋转，控制渐变网格的 Z 轴旋转角度
|
||
shader="defaults" // 着色器类型，设置默认着色器（"defaults" 表示默认着色器）
|
||
type="waterPlane" // 网格类型，设置渐变的形状（如 "waterPlane" 表示水波平面）
|
||
uAmplitude={0} // 统一变量：振幅，控制波形渐变的振幅（在 Framer 和 shadergradient.co 上重名为 Spiral）
|
||
uDensity={2.8} // 统一变量：密度，控制渐变图案的密度
|
||
uFrequency={5.5} // 统一变量：频率，控制渐变波形的频率
|
||
uSpeed={0.1} // 统一变量：速度，控制渐变运动的速度
|
||
uStrength={3.4} // 统一变量：强度，控制渐变效果的强度
|
||
uTime={0.2} // 统一变量：时间，控制着色器动画的时间参数
|
||
wireframe={false} // 线框模式，是否显示网格线框（false 表示关闭）
|
||
/>*/}
|
||
<ShaderGradient
|
||
control='query'
|
||
urlString={
|
||
'https://www.shadergradient.co/customize?animate=on&axesHelper=on&bgColor1=%23ECEFF4&bgColor2=%23ECEFF4&brightness=1&cAzimuthAngle=0&cDistance=20&cPolarAngle=90&cameraZoom=1&color1=%23021033&color2=%23ECEFF4&color3=%234E5C78&destination=onCanvas&embedMode=off&envPreset=city&format=gif&fov=10&frameRate=10&grain=off&lightType=3d&pixelDensity=3&positionX=0&positionY=0&positionZ=5&range=enabled&rangeEnd=40&rangeStart=0&reflection=1&rotationX=0&rotationY=0&rotationZ=0&shader=defaults&type=waterPlane&uAmplitude=0&uDensity=2.8&uFrequency=5.5&uSpeed=0.3&uStrength=3.4&uTime=0.2&wireframe=false'
|
||
}
|
||
/>
|
||
</ShaderGradientCanvas>
|
||
);
|
||
};
|
||
|
||
export default ShaderBackground;
|