@playcanvas/react/dist/Application.d.ts

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

import React, { FC } from 'react';
import { FILLMODE_NONE, FILLMODE_FILL_WINDOW, FILLMODE_KEEP_ASPECT, RESOLUTION_AUTO, Application as PlayCanvasApplication, RESOLUTION_FIXED } from 'playcanvas';
import { PublicProps } from './utils/types-utils.ts';
import { GraphicsDeviceOptions } from './types/graphics-device-options.ts';
import { DeviceType } from './utils/create-graphics-device.ts';
/**
 * The **Application** component is the root node of the PlayCanvas React API. It creates a canvas element
 * and initializes a PlayCanvas application instance.
 *
 * @param {ApplicationProps} props - The props to pass to the application component.
 * @returns {React.ReactNode} - The application component.
 *
 * @example
 * <Application>
 *  <Entity />
 * </Application>
 */
export declare const Application: React.FC<ApplicationProps>;
/**
 * An alternative Application component that does not create a canvas element.
 * This allows you to create a canvas independently from PlayCanvas and pass it in as a ref.
 *
 * @param {ApplicationWithoutCanvasProps} props - The props to pass to the application component.
 * @returns {React.ReactNode} The application component.
 *
 * @example
 * const canvasRef = useRef<HTMLCanvasElement>(null);
 *
 * return (
 *   <>
 *     <canvas ref={canvasRef} />
 *     <ApplicationWithoutCanvas canvasRef={canvasRef}>
 *       <Entity />
 *     </ApplicationWithoutCanvas>
 *   </>
 * );
 */
export declare const ApplicationWithoutCanvas: FC<ApplicationWithoutCanvasProps>;
type CanvasProps = {
    /**
     * The class name to attach to the canvas component
     * @default pc-app
     */
    className?: string;
    /**
     * A style object added to the canvas component
     * @default { width: '100%', height: '100%' }
     */
    style?: Record<string, unknown>;
};
interface ApplicationProps extends Partial<PublicProps<PlayCanvasApplication>>, CanvasProps {
    /**
     * Controls how the canvas fills the window and resizes when the window changes.
     * @default FILLMODE_NONE
     */
    fillMode?: typeof FILLMODE_NONE | typeof FILLMODE_FILL_WINDOW | typeof FILLMODE_KEEP_ASPECT;
    /**
     * Change the resolution of the canvas, and set the way it behaves when the window is resized.
     * @default RESOLUTION_AUTO
     */
    resolutionMode?: typeof RESOLUTION_AUTO | typeof RESOLUTION_FIXED;
    /**
     * When `true`, the PlayCanvas Physics system will be enabled.
     * @default false
     */
    usePhysics?: boolean;
    /**
     * The device types to use for the graphics device. This allows you to set an order of preference for the graphics device.
     * The first device type in the array that is supported by the browser will be used.
     *
     * @example
     * <Application deviceTypes={[DEVICETYPE_WEBGPU, DEVICETYPE_WEBGL2]} />
     *
     * This will use the WebGPU device if it is supported, otherwise it will use the WebGL2 device.
     *
     * @default [DEVICETYPE_WEBGL2]
     */
    deviceTypes?: DeviceType[];
    /** Graphics Settings */
    graphicsDeviceOptions?: GraphicsDeviceOptions;
    /** The children of the application */
    children?: React.ReactNode;
}
interface ApplicationWithoutCanvasProps extends ApplicationProps {
    /** A ref to a html canvas element */
    canvasRef: React.RefObject<HTMLCanvasElement | null>;
}
export {};