Creating and Initializing the Viewer

The viewer library exposes the Viewer type and you can instantiate it like below:

const viewer = new Viewer(container: HTMLElement, params: ViewerParams)

• container : the HTML element you want to attach the viewer to

params : ViewerParams

interface ViewerParams {
  showStats: boolean
  environmentSrc: Asset | string
	verbose: boolean
}

• showStats : Enables/Disabled the stats window at the top left of the viewer canvas
• environmentSrc : Allows for user defined environment texture for the viewer Scene in the form of a equirectangular HDRI
• verbose : Displays additional information and warning in the console.

export enum AssetType {
  TEXTURE_8BPP = 'png', // For now
  TEXTURE_HDR = 'hdr',
  TEXTURE_EXR = 'exr'
}

export interface Asset {
  src: string
  type: AssetType
}

• src : The URL of the HDRI
• type : The type of the HDRI asset. Generally you’d want a HDR format

The viewer library provides the DefaultViewerParams constant in case you do not want to provide any specific ViewerParams

Before you can start using the Viewer you need to initialize it like below:

await viewer.init()

The function is asynchronous because in this step the viewer either loads required assets (like the HDRI you might have provided in the params either generates runtime assets.