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

`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

`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.