@playcanvas/react/dist/hooks/use-asset.d.ts

A React renderer for PlayCanvas – build interactive 3D applications using React's declarative paradigm.

import { AssetMeta } from "../utils/fetch-asset.ts";
import { Asset } from "playcanvas";
type AssetResultCallback = (meta: AssetMeta) => void;
/**
 * Result of an asset loading operation
 */
export interface AssetResult {
    /**
     * The loaded asset, or null if not loaded or failed
     * @defaultValue null
     */
    asset: Asset | null;
    /**
     * Whether the asset is currently loading, or false if it has loaded or failed
     * @defaultValue true
     */
    loading: boolean;
    /**
     * Error message if loading failed, or null if successful
     * @defaultValue null
     */
    error: string | null;
    /**
     * Use this to subscribe to loading progress events
     * @param {AssetMeta} meta - The progress of the asset loading.
     * @returns void
     */
    subscribe: (cb: AssetResultCallback) => () => void;
}
/**
 * Simple hook to fetch an asset from the asset registry.
 *
 * @param src - The source URL of the asset.
 * @param type - The type of the asset (must be one of: texture, gsplat, container, model).
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * const { asset, loading, error } = useAsset('model.glb', 'container');
 *
 * if (loading) return <LoadingSpinner />;
 * if (error) return <ErrorMessage message={error} />;
 * if (!asset) return null;
 *
 * return <Render asset={asset} />;
 * ```
 */
export declare const useAsset: (src: string, type: string, props?: Record<string, unknown>) => AssetResult;
/**
 * Simple hook to fetch a splat asset from the asset registry.
 *
 * @param src - The source URL of the splat asset.
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * const { asset, loading, error } = useSplat('splat.ply');
 *
 * if (loading) return <LoadingSpinner />;
 * if (error) return <ErrorMessage message={error} />;
 * if (!asset) return null;
 *
 * return <GSplat asset={asset} />;
 * ```
 */
export declare const useSplat: (src: string, props?: Record<string, unknown>) => AssetResult;
/**
 * Simple hook to fetch a texture asset from the asset registry.
 *
 * @param src - The source URL of the texture asset.
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * const { asset, loading, error } = useTexture('texture.jpg');
 *
 * if (loading) return <LoadingSpinner />;
 * if (error) return <ErrorMessage message={error} />;
 * if (!asset) return null;
 *
 * return <Material map={asset.resource} />;
 * ```
 */
export declare const useTexture: (src: string, props?: Record<string, unknown>) => AssetResult;
/**
 * Simple hook to load an environment atlas texture asset.
 *
 * @param src - The source URL of the environment atlas texture.
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * const { asset, loading, error } = useEnvAtlas('env.jpg');
 *
 * if (loading) return <LoadingSpinner />;
 * if (error) return <ErrorMessage message={error} />;
 * if (!asset) return null;
 *
 * return <Environment envAtlas={asset} />;
 * ```
 */
export declare const useEnvAtlas: (src: string, props?: Record<string, unknown>) => AssetResult;
/**
 * Simple hook to load a 3D model asset (GLB/GLTF).
 *
 * @param src - The source URL of the 3D model.
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * const { asset, loading, error } = useModel('model.glb');
 *
 * if (loading) return <LoadingSpinner />;
 * if (error) return <ErrorMessage message={error} />;
 * if (!asset) return null;
 *
 * return <Container asset={asset} />;
 * ```
 */
export declare const useModel: (src: string, props?: Record<string, unknown>) => AssetResult;
/**
 * Simple hook to load a font asset.
 *
 * Fonts are described SDF textures, so you'll need to convert your .ttf files to SDF textures.
 * into the correct format.
 *
 * Learn more about SDF textures {@link https://playcanvas-react.vercel.app/docs/api/hooks/use-asset#usefont}.
 *
 * @param src - The source URL of the font asset.
 * @param props - Additional properties to pass to the asset loader.
 * @returns An object containing the asset, loading state, and any error.
 *
 * @example
 * ```tsx
 * import roboto from '@assets/fonts/roboto.ttf?url';
 * export const App = () => {
 *  const { asset, loading, error } = useFont(roboto);
 * }
 * ```
 */
export declare const useFont: (src: string, props?: Record<string, unknown>) => AssetResult;
export {};