import * as React$1 from 'react'; import { ReactNode, FC } from 'react'; import { CanvasTexture, Texture } from 'three'; /** * This type defines the properties for a linear gradient, which can be used to create a smooth color transition effect. The `type` property specifies that this is a linear gradient, while the `from` and `to` properties define the starting and ending colors of the gradient. The `stops` property allows for specifying multiple color stops along the gradient, each defined by a position (between 0 and 1) and a color value. */ type GradientLinearProps = { type?: "linear"; from?: [number, number]; to?: [number, number]; stops?: [number, string][]; }; /** * This type defines the properties for a radial gradient, which can be used to create a circular color transition effect. The `type` property specifies that this is a radial gradient, while the `from` and `to` properties define the starting and ending colors of the gradient. The `stops` property allows for specifying multiple color stops along the gradient, each defined by a position (between 0 and 1) and a color value. */ type GradientRadialProps = { type?: "radial"; from?: [number, number, number]; to?: [number, number, number]; stops?: [number, string][]; }; /** * This type defines the properties for an image layer, which can be used to include an image in a texture set. The `src` property specifies the source URL of the image, while the `fit` property determines how the image should be scaled or fitted within its container. The `fit` property can accept a string value (e.g., "cover", "contain") or a boolean value to indicate whether the image should be stretched to fill the container. */ type ImageProps = { src?: string; fit?: string | boolean; }; /** * This type defines the properties for transformations that can be applied to a layer, including position, scale, and rotation. The `position` property specifies the x and y coordinates for the layer's position, the `scale` property defines the scaling factors along the x and y axes, and the `rotation` property indicates the rotation angle in radians. */ type TransformationProps = { position?: [number, number]; scale?: [number, number]; rotation?: number; }; /** * This type defines the properties for a layer in a texture set, which can include various visual effects and transformations. The `LayerProps` interface extends several other property types, including `ImageProps`, `TransformationProps`, `ColorProps`, and `ShapeProps`. It also includes additional properties for dimensions, gradients, blending modes, alpha settings, bloom effects, seamless tiling, and noise generation. Each property allows for fine-tuning the appearance and behavior of the layer within the texture set. */ type ColorProps = { color?: string | boolean; fill?: string | boolean; }; /** * This type defines the properties for a shadow effect that can be applied to a layer. The `color` property specifies the color of the shadow, the `blur` property determines the amount of blur applied to the shadow, and the `offset` property defines the x and y offsets for the shadow's position relative to the layer. */ type ShadowProps = { color?: string; blur?: number; offset?: [number, number]; }; /** * This type defines the properties for an outline effect that can be applied to a layer. The `color` property specifies the color of the outline, the `size` property determines the thickness of the outline, and the `detail` property allows for specifying the level of detail or smoothness of the outline's edges. */ type OutlineProps = { color?: string; size?: number; detail?: number; }; /** * This type defines the properties for an alpha effect that can be applied to a layer, allowing for control over the transparency and blending of the layer. The `level` property specifies the overall opacity level, the `power` property determines the intensity of the alpha effect, the `offset` property allows for adjusting the starting point of the alpha effect, and the `reverse` property indicates whether the alpha effect should be inverted. */ type AlphaProps = { level?: number; power?: number; offset?: number; reverse?: boolean; }; /** * This type defines the properties for a bloom effect that can be applied to a layer, creating a glowing or halo-like effect around bright areas. The `size` property specifies the size of the bloom effect, the `strength` property determines the intensity of the bloom, the `softness` property controls the softness or spread of the bloom, the `detail` property allows for specifying the level of detail in the bloom effect, and the `darken` property indicates whether the bloom effect should darken surrounding areas. */ type BloomProps = { size?: number; strength?: number; softness?: number; detail?: number; darken?: boolean; }; /** * This type defines the properties for text rendering within a layer, allowing for customization of the text's appearance and positioning. The `value` property specifies the text content, while the `font`, `style`, and `weight` properties allow for selecting the font family, style (e.g., italic), and weight (e.g., bold) of the text. The `width` and `height` properties define the dimensions of the text area, and the `align` and `base` properties control the horizontal alignment and vertical baseline of the text, respectively. */ type TextProps = { value: string; font?: string; style?: string; weight?: string | number; width?: number; height?: number; align?: CanvasTextAlign; base?: CanvasTextBaseline; }; /** * This type defines the properties for a layer in a texture set, which can include various visual effects and transformations. The `LayerProps` interface extends several other property types, including `ImageProps`, `TransformationProps`, `ColorProps`, and `ShapeProps`. It also includes additional properties for dimensions, gradients, blending modes, alpha settings, bloom effects, seamless tiling, and noise generation. Each property allows for fine-tuning the appearance and behavior of the layer within the texture set. */ type ShapeProps = { shapeThickness?: number; shapeRounded?: boolean; line?: [number, number, number, number, ...number[]]; circle?: [number, number, number, number?, number?, number?, number?, boolean?]; rect?: [number, number, number, number?, number?]; poly?: [...number[], number]; curve?: [number, number, number, number, number, number, number?, number?]; text?: TextProps; }; /** * This type defines the properties for a seamless effect that can be applied to a layer, allowing for the creation of textures that can be tiled without visible seams. The `offset` property specifies the x and y offsets for the seamless effect, the `size` property defines the dimensions of the seamless area, the `both` property indicates whether the seamless effect should be applied in both directions, and the `flipX` and `flipY` properties control whether the texture should be flipped horizontally or vertically. The `alphaOffset` property allows for adjusting the transparency of the seamless effect, and the `alphaReverse` property indicates whether the alpha effect should be inverted. */ type SeamlessProps = { offset?: [number, number]; size?: [number, number]; both?: boolean; flipX?: boolean; flipY?: boolean; alphaOffset?: number; alphaReverse?: boolean; }; /** * This type defines the properties for a noise effect that can be applied to a layer, allowing for the generation of random or Perlin noise patterns. The `type` property specifies the type of noise to be generated (either "random" or "perlin"), while the `from` and `to` properties define the range of values for the noise. The `steps` property allows for specifying the number of discrete steps in the noise pattern, the `seed` property provides a seed value for random number generation, the `detail` property controls the level of detail in the noise, and the `offset` property allows for adjusting the starting point of the noise effect. */ type NoiseRandomProps = { type: "random" | "perlin"; from?: string; to?: string; steps?: number; seed?: string | number; detail?: number; offset?: number; }; /** * This type defines the properties for a bricks pattern that can be applied to a layer, allowing for the creation of a brick-like texture. The `color` property specifies the color of the bricks, while the `width` and `height` properties define the dimensions of each brick. The `thickness` property determines the thickness of the mortar between bricks, and the `offsetX` property allows for adjusting the horizontal offset of the brick pattern. The `seed` property provides a seed value for random number generation, and the `randomize` property allows for introducing randomness in the brick placement. The `radius` property controls the corner radius of the bricks, and the `layer` property allows for specifying additional layer properties. */ type BricksProps = { color?: string | string[]; width?: number; height?: number; thickness?: number; offsetX?: number; seed?: number; randomize?: [number, number?, number?]; radius?: number; layer?: LayerProps; }; /** * This interface defines the properties for a layer in a texture set, which can include various visual effects and transformations. * The `LayerProps` interface extends several other property types, including `ImageProps`, `TransformationProps`, `ColorProps`, and `ShapeProps`. It also includes additional properties for dimensions, gradients, blending modes, alpha settings, bloom effects, seamless tiling, and noise generation. Each property allows for fine-tuning the appearance and behavior of the layer within the texture set. * @property dimensions - The dimensions of the layer (width and height). * @property gradient - The gradient effect to be applied to the layer, which can be linear or radial. * @property nearest - A boolean indicating whether to use nearest-neighbor interpolation for the layer. * @property repeat - A boolean indicating whether the layer should be repeated (tiled). * @property shadow - The shadow effect to be applied to the layer, which can be a `ShadowProps` object or a boolean. * @property outline - The outline effect to be applied to the layer, which can be an `OutlineProps` object or a boolean. * @property filter - A string specifying a CSS filter to be applied to the layer. * @property flipX - A boolean indicating whether the layer should be flipped horizontally. * @property flipY - A boolean indicating whether the layer should be flipped vertically. * @property blend - The blending mode to be used for the layer, specified as a `GlobalCompositeOperation` value. * @property alpha - The alpha effect to be applied to the layer, which can be an `AlphaProps` object, a number, or a boolean. * @property bloom - The bloom effect to be applied to the layer, which can be a `BloomProps` object or a boolean. * @property seamless - The seamless effect to be applied to the layer, which can be a `SeamlessProps` object or a boolean. * @property noise - The noise effect to be applied to the layer, specified as a `NoiseRandomProps` object. */ interface LayerProps extends ImageProps, TransformationProps, ColorProps, ShapeProps { dimensions?: number; gradient?: GradientLinearProps | GradientRadialProps | boolean; nearest?: boolean; repeat?: boolean; shadow?: ShadowProps | boolean; outline?: OutlineProps | boolean; filter?: string; flipX?: boolean; flipY?: boolean; blend?: GlobalCompositeOperation; alpha?: AlphaProps | number | boolean; bloom?: BloomProps | boolean; seamless?: SeamlessProps | boolean; noise?: NoiseRandomProps; } /** * This type defines the return value of a transformation operation, which includes the position, scale, and rotation of an object. The `position` property is a tuple representing the x and y coordinates of the object's position, the `scale` property is a tuple representing the scaling factors along the x and y axes, and the `rotation` property is a number representing the rotation angle in radians. This type can be used to describe the transformation state of an object in a 2D or 3D space. */ type TransformReturn = { position: [number, number]; scale: [number, number]; rotation: number; }; /** * This type defines the possible map types that can be used in a texture set, representing different types of texture maps commonly used in 3D rendering. Each map type corresponds to a specific aspect of the material's appearance, such as environment mapping, specular highlights, displacement mapping, normal mapping, bump mapping, roughness, metalness, alpha transparency, light emission, emissive properties, clearcoat effects, sheen properties, specular intensity and color, thickness, transmission, and ambient occlusion (AO). These map types allow for fine-tuning the visual characteristics of materials in a 3D scene. */ type MapType = "env" | "specular" | "displacement" | "normal" | "bump" | "roughness" | "metalness" | "alpha" | "light" | "emissive" | "clearcoat" | "clearcoatNormal" | "clearcoatRoughness" | "sheenRoughness" | "sheenColor" | "specularIntensity" | "specularColor" | "thickness" | "transmission" | "ao"; /** * This interface defines the properties for a texture set component, which can be used to create and manage textures in a 3D rendering context. The `map` property specifies the type of texture map to be used, the `dimensions` property defines the size of the texture, and the `children` property allows for nesting React nodes that will be rendered onto the texture. Additionally, this interface extends a record of string keys to any values, allowing for flexibility in passing additional properties to the texture set component. */ interface TextureSetProps extends Record { map?: MapType; dimensions?: number; children?: ReactNode; } /** * This type defines the result of a texture generation operation, which can be either a `CanvasTexture`, a `Texture`, or `null`. A `CanvasTexture` is a texture created from an HTML canvas element, while a `Texture` is a more general representation of a texture in Three.js. The `null` value indicates that no texture was generated or available. This type can be used to represent the outcome of rendering operations that produce textures for use in 3D scenes. */ type TextureResult = CanvasTexture | Texture | null; /** * A React component that represents a layer in a texture set. This component is used to define the properties of a layer, such as color, opacity, and blending mode. It does not render any visual output itself but serves as a configuration for the texture generation process. * @param props The properties of the layer, including color, opacity, blending mode, and other relevant settings. * @returns A React component that does not render any visual output but provides configuration for texture generation. */ declare const Layer: FC; /** * A React component that creates a texture set from React nodes and renders it as a Three.js primitive. This component uses the `useTextureSet` hook to generate a texture from the provided children and dimensions, and then attaches it to a Three.js object. * @param props The properties for the texture set, including the map type, dimensions, and any additional props for the Three.js primitive. * @param forwardRef A ref that can be used to access the underlying Three.js primitive. * @returns A React component that renders a Three.js primitive with the generated texture set. */ declare const TextureSet: React$1.FC; /** * A custom hook for creating a texture set from React nodes * @param children The React nodes to be rendered onto the texture * @param dimensions The dimensions of the texture (width and height) * @returns A CanvasTexture created from the rendered React nodes */ declare const useTextureSet: (children: React$1.ReactNode, dimensions: number) => TextureResult; /** * A custom hook for creating a canvas element from React nodes * @param children The React nodes to be rendered onto the canvas * @param dimensions The dimensions of the canvas (width and height) * @returns A HTMLCanvasElement created from the rendered React nodes */ declare const useCanvas: (children: React.ReactNode, dimensions?: number) => HTMLCanvasElement | null; /** * A component for creating a bricks pattern * @param props The props for the bricks pattern * @returns A React component rendering the bricks pattern */ declare const Bricks: (props: BricksProps) => React$1.JSX.Element; /** * This constant defines the default properties for a texture set, providing baseline values for various visual effects and transformations. It includes default settings for dimensions, image source, position, scale, rotation, color, fill, gradient, nearest neighbor filtering, shadow, outline, filter, blending mode, alpha settings, bloom effects, shape thickness, text properties, and seamless tiling. These defaults serve as a starting point for creating textures and can be overridden by user-defined properties when generating texture sets. */ declare const DEFAULT: { readonly dimensions: 256; readonly src: ""; readonly image: "size-max center middle"; readonly position: readonly [0, 0]; readonly scale: readonly [1, 1]; readonly rotation: 0; readonly color: "white"; readonly fill: "black"; readonly gradient: { readonly type: "linear"; readonly linear: { readonly from: readonly [0, 0]; readonly to: readonly [0, 1]; readonly stops: readonly [readonly [0, "white"], readonly [1, "black"]]; }; readonly radial: { readonly from: readonly [0.5, 0.5, 0]; readonly to: readonly [0.5, 0.5, 1]; readonly stops: readonly [readonly [0, "white"], readonly [1, "black"]]; }; }; readonly nearest: false; readonly shadow: { readonly color: "black"; readonly blur: 20; readonly offset: readonly [0, 0]; }; readonly outline: { readonly color: "black"; readonly size: 1; readonly detail: 8; }; readonly filter: "none"; readonly blend: "source-over"; readonly alpha: { readonly level: 1; readonly power: 1; readonly offset: 0; readonly reverse: false; }; readonly bloom: { readonly size: 30; readonly strength: 0.4; readonly softness: 0.7; readonly detail: 10; readonly darken: false; }; readonly shapeThickness: 0; readonly text: { readonly font: "serif"; readonly style: ""; readonly weight: ""; readonly width: 0; readonly height: 1.3; readonly align: "center"; readonly base: "middle"; }; readonly seamless: { readonly offset: readonly [0.3, 0.3]; readonly size: readonly [0.2, 0.2]; readonly both: false; readonly alphaOffset: 0; readonly alphaReverse: false; readonly flipX: false; readonly flipY: false; }; }; /** * This variable holds the global properties for a texture set, allowing for the configuration of various visual effects and transformations. It includes properties for dimensions, image source, position, scale, rotation, color, fill, gradient, nearest neighbor filtering, shadow, outline, filter, blending mode, alpha settings, bloom effects, seamless tiling, and noise generation. These global properties can be modified to customize the appearance and behavior of textures generated within the application. */ declare let textureGlobals: LayerProps; /** * This function updates the global properties for a texture set with the provided properties, allowing for the customization of various visual effects and transformations. It merges the specified properties into the existing `textureGlobals` object, enabling users to modify settings such as dimensions, image source, position, scale, rotation, color, fill, gradient, nearest neighbor filtering, shadow, outline, filter, blending mode, alpha settings, bloom effects, seamless tiling, and noise generation. This function can be used to set default values for texture generation operations within the application. * @param props The properties to be merged into the global texture settings, allowing for customization of visual effects and transformations in texture generation. */ declare const textureDefaults: (props: LayerProps) => void; export { type AlphaProps, type BloomProps, Bricks, type BricksProps, type ColorProps, DEFAULT, type GradientLinearProps, type GradientRadialProps, type ImageProps, Layer, type LayerProps, type MapType, type NoiseRandomProps, type OutlineProps, type SeamlessProps, type ShadowProps, type ShapeProps, type TextProps, type TextureResult, TextureSet, type TextureSetProps, type TransformReturn, type TransformationProps, textureDefaults, textureGlobals, useCanvas, useTextureSet };