Application

The Application is the root component for any PlayCanvas React application. It initializes and manages the canvas and PlayCanvas application instance.

Usage

The Application component wraps all other components.


import { Application, Entity } from '@playcanvas/react'
import { Camera } from '@playcanvas/react/components'
import { OrbitControls } from '@playcanvas/react/scripts'
 
export default function Scene() {
  return (
    <Application 
      fillMode={FILLMODE_FILL_WINDOW}
      resolutionMode={RESOLUTION_AUTO}
    >
      <Entity name="camera" position={[0, 0, 10]}>
        <Camera />
        <OrbitControls />
      </Entity>
      {/* Your scene content */}
    </Application>
  )
}

Props

Name	Type	Default
`fillMode`	`"NONE" \| "FILL_WINDOW" \| "KEEP_ASPECT"` Controls how the canvas fills the window and resizes when the window changes.	`FILLMODE_NONE`
`resolutionMode`	`"AUTO" \| "FIXED"` Change the resolution of the canvas, and set the way it behaves when the window is resized.	`RESOLUTION_AUTO`
`usePhysics`	`boolean` When `true`, the PlayCanvas Physics system will be enabled.	`false`
`deviceTypes`	`DeviceType[]` 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.	`[DEVICETYPE_WEBGL2]`
`graphicsDeviceOptions`	`GraphicsDeviceOptions` Graphics Settings
`children`	`React.ReactNode` The children of the application
`enableBundles`	`boolean` Set this to false if you want to run without using bundles. We set it to true only if TextDecoder is available because we currently rely on it for untarring.
`frameRequestId`	`any` A request id returned by requestAnimationFrame, allowing us to cancel it.
`timeScale`	`number` Scales the global time delta. Defaults to 1.
`maxDeltaTime`	`number` Clamps per-frame delta time to an upper bound. Useful since returning from a tab deactivation can generate huge values for dt, which can adversely affect game state. Defaults to 0.1 (seconds).
`frame`	`number` The total number of frames the application has updated since start() was called.
`frameGraph`	`FrameGraph` The frame graph.
`renderer`	`ForwardRenderer` The forward renderer.
`scriptsOrder`	`string[]` Scripts in order of loading first.
`stats`	`ApplicationStats` The application’s performance stats.
`autoRender`	`boolean` When true, the application’s render function is called every frame. Setting autoRender to false is useful to applications where the rendered image may often be unchanged over time. This can heavily reduce the application’s load on the CPU and GPU. Defaults to true.
`renderNextFrame`	`boolean` Set to true to render the scene on the next iteration of the main loop. This only has an effect if autoRender is set to false. The value of renderNextFrame is set back to false again as soon as the scene has been rendered.
`graphicsDevice`	`GraphicsDevice` The graphics device used by the application.
`root`	`Entity` The root entity of the application.
`scene`	`Scene` The scene managed by the application.
`lightmapper`	`Lightmapper \| null` The run-time lightmapper.
`loader`	`ResourceLoader` The resource loader.
`assets`	`AssetRegistry` The asset registry managed by the application.
`bundles`	`BundleRegistry` The bundle registry managed by the application.
`scenes`	`SceneRegistry` The scene registry managed by the application.
`scripts`	`ScriptRegistry` The application’s script registry.
`systems`	`ComponentSystemRegistry` The application’s component system registry.
`i18n`	`I18n` Handles localization.
`keyboard`	`Keyboard \| null` The keyboard device.
`mouse`	`Mouse \| null` The mouse device.
`touch`	`TouchDevice \| null` Used to get touch events input.
`gamepads`	`GamePads \| null` Used to access GamePad input.
`elementInput`	`ElementInput \| null` Used to handle input for ElementComponents.
`xr`	`XrManager \| null` The XR Manager that provides ability to start VR/AR sessions.
`defaultLayerWorld`	`Layer`
`defaultLayerDepth`	`Layer`
`defaultLayerSkybox`	`Layer`
`defaultLayerUi`	`Layer`
`defaultLayerImmediate`	`Layer`
`controller`	`any`
`context`	`any`
`className`	`string` The class name to attach to the canvas component	`pc-app`
`style`	`Record<string, unknown>` A style object added to the canvas component	`{ width: '100%', height: '100%' }`

`usePhysics`

Enables physics for the application. Learn more about Physics in Playcanvas . Entities will need to have a RigidBody and Collisions components to be affected by physics.

Type: boolean Default: false

`deviceTypes`

The deviceTypes prop determines the graphics device to use. It accepts an array of strings, each representing a different device which sets an order of fallback devices. The first device that gets successfully created, will be used.

For example, if you want to use WebGPU first, but fall back to WebGL2 when WebGPU is not supported, you can use <Application deviceTypes={["webgpu", "webgl2"]} />.

"webgpu" - Use the WebGPU device type
"webgl2" - Use the WebGL2 device type
"null" - Use the Null device type. Useful for testing.

`fillMode`

This prop determines how the canvas fills its container. It accepts one of the following values from PlayCanvas:

FILLMODE_NONE - The canvas will be the size specified by the width and height props
FILLMODE_FILL_WINDOW - The canvas will fill the browser window
FILLMODE_KEEP_ASPECT - The canvas will maintain its aspect ratio while filling the container

Default: FILLMODE_NONE

`resolutionMode`

The resolutionMode prop determines how the canvas resolution is set. It accepts one of the following values from PlayCanvas:

RESOLUTION_AUTO - The resolution will be automatically adjusted based on the device’s pixel ratio
RESOLUTION_FIXED - The resolution will be fixed at the specified width and height
RESOLUTION_NATIVE - The resolution will match the device’s native resolution

Default: RESOLUTION_AUTO

`width`

The width prop specifies the width of the canvas when using RESOLUTION_FIXED.

`height`

The height prop specifies the height of the canvas when using RESOLUTION_FIXED.