const spinViewer = new Mxt3dSpinViewer();
await spinViewer.init({
    apiKey: "yourCustomApiKey",
    appId: "yourCustomAppId",
    clientId: "yourCustomClientId",
    assetEnvironment: MxtAssetEnvironment.TEST or MxtAssetEnvironment.STAGING or MxtAssetEnvironment.PRODUCTION,
    element: document.getElementById('my-3d-spin-element'),
    icons: {
        close: yourCustomIcon,
        collapse: yourCustomIcon,
        download: yourCustomIcon,
        expand: yourCustomIcon,
        rotateLeft: yourCustomIcon,
        rotateRight: yourCustomIcon,
        zoomIn: yourCustomIcon,
        zoomOut: yourCustomIcon
    },
    expandButton: {
        position: 'right',
        onExpand: putYourDesiredCallbackHere,
        onCollapse: putYourOtherDesiredCallbackHere
    },
});
try {
  await spinViewer.load(sku);
  //then on selection of a different sku, 
  //await spinViewer.load(otherSku);
} catch(e) {
  if(e.status == 404) {
      //invalid sku
  }
  else if(e.status == 403) {
      //bad API key
  }
}

const spinViewer = new Mxt3dSpinViewer();
try {
  await spinViewer.init({
    initialSku: sku,
    clientId: "yourCustomClientId",
    apiKey: "yourCustomApiKey",
    appId: "yourCustomAppId",
    assetEnvironment: MxtAssetEnvironment.TEST or MxtAssetEnvironment.STAGING or MxtAssetEnvironment.PRODUCTION,
    element: document.getElementById('my-3d-spin-element'),
    icons: {
        close: yourCustomIcon,
        collapse: yourCustomIcon,
        download: yourCustomIcon,
        expand: yourCustomIcon,
        rotateLeft: yourCustomIcon,
        rotateRight: yourCustomIcon,
        zoomIn: yourCustomIcon,
        zoomOut: yourCustomIcon
    },
    expandButton: {
        position: 'right',
        onExpand: putYourDesiredCallbackHere,
        onCollapse: putYourOtherDesiredCallbackHere
    },
  });
} catch(e) {
  if(e.status == 404) {
      //invalid sku
  }
  else if(e.status == 403) {
      //bad API key
  }
}

export interface Mxt3dSpinViewerOptions {
    /** private access key to spins */
    apiKey:string;
    /** private app id for spins */
    appId:string;
    /** private client id for spins */
    clientId:string;
    /** @deprecated Services endpoint to retrieve spin data; this was never needed by product configurator, and is no longer needed by 3d spins as there is a single client endpoint now baked into application */
    endpoint?: string;
    /** The environment to pull assets from */
    assetEnvironment:MxtAssetEnvironment;
    /** Element to place the rendering canvas inside of */
    element: HTMLElement;
    /** Log level; defaults to WARN (3) */
    logging?: log.LogLevel;
    /** Zoom Delta - in meters; defaults to .3 */
    zoomDelta?: number;
    /** Rotate Delta - in radians; defaults to .3 */
    rotateDelta?: number;
    /** Multiplier; amount of space product takes up in screen by default; defaults to .75. */
    fitToScreenMultiplier?: number;
    /** Multiplier; How much you can zoom out past the initial zoom. Defaults to 1.33. A value of 1 would mean that the initial zoom distance is the farthest you can zoom out */
    maxDistanceMultiplier?: number;
    /** If an initial sku is provided, will auto load that sku after loading renderer */
    initialSku?:string;
    /** If initial child skus is provided (along with initial sku), will auto load those children sku after loading renderer */
    initialChildSkus?:string[]
    /** Used to override default app config lighting values */
    lighting?: Lighting;
    /** Size in pixels */
    loadingIconSize?: number;
    /** provide a CSS string */
    loadingIconColor?: string; 
    /** provide a CSS string 6.3+*/
    loadingIconBackgroundColor?: string; 
    /** provides a client-specific way of resolving skus from products, and vice-versa */
    skuResolver?: IMxtSkuResolver; 
    /** provides client-specific way of modifying the load of a product */
    loadModifiers?: IProductLoadModifierPlugin[];
    /** @deprecated Endpoint to retrieve web AR assets from; deprecated and legacy behavior that gets usdz and GLTF. Use webArOnDemandEndpoint now */
    webArEndpoint?:string;
    /** Endpoint to retrieve usdz on demand */
    webArOnDemandEndpoint?:string;
    /** Url to check and see if an AR asset exists so that if it does we don't need to request one generated */
    webArAssetExistsEndpoint?: string;
    webArOptions?: {
        //by default, both USDZ and GLTF are turned on, this allows forcing USDZ off
        disableUsdz?:boolean,
        //by default, both USDZ and GLTF are turned on, this allows forcing GLTF off
        disableGltf?:boolean
        /** @deprecated - only for use with deprecated webArEndpoint; by default, web ar uses sku to query; however can force to use product id instead for some internal uses*/
        useProductId?:string

    };
    presetViews?: {
        /** Enabled by default, but can be turned off */
        enabled?: boolean;
        views?: IMxtPresetView[]
    };
    screenshot?: {
        /** Enabled by default, but can be turned off */
        enabled?: boolean;
        /** By default, screenshot 1024x1024. May specify a different width, or set to -1 to use size on screen */
        width?: number;
        /** By default, screenshot 1024x1024. May specify a different height, or set to -1 to use size on screen */
        height?: number;
        /** By default, hi res screenshot 4096x4096. May specify a different width, or set to -1 to use size on screen */
        hiResWidth?: number;
        /** By default, hi res screenshot 4096x4096. May specify a different height, or set to -1 to use size on screen */
        hiResHeight?: number;
        imageFilename?: string;
        waterMarkPlugin?: IMxtImageWatermarkPlugin;
        downloadImagePlugins?: IMxt3dSpinDownloadImagePlugin[];
    };
    downloadBomPlugin?: IBomPlugin;

    room?: RoomOptions;


    /** Advanced camera options */
    camera?: {
        defaultBeta?: number,
        defaultAlpha?: number,
        fieldOfView?: number,
        lowerBetaLimit?: number,
        upperBetaLimit?: number,
        lowerAlphaLimit?: number,
        upperAlphaLimit?: number,
        embeddedReflectionCubeTextureUrls?: {
            nx:string,
            ny:string,
            nz:string,
            px:string,
            py:string,
            pz:string
        },
        /** Lighting app config; only applicable when using spins in a stand-alone context; from within product config or other application, use manifest app config to set lighting config */
        lighting?: Lighting
    };

    /** Custom Icons to override defualts */
    icons?: {
        close?: string,
        collapse?: string,
        presetView?: string,
        download?: string,
        expand?: string,
        rotateLeft?: string,
        rotateRight?: string,
        zoomIn?: string,
        zoomOut?: string
    };

    /** The position of this optional button is determined by accepted values, 'left' or 'right' */
    expandButton?: {
        onExpand?: any,
        onCollapse?: any,
        position?: string
    };

    customText?: {
        /** language should be an language ISO code (https://www.metamodpro.com/browser-language-codes)*/
        [language:string]: any
    };
    disableProgressiveLoad?:boolean;    // bool to disable the progressive loading if true
}

/**
 * Show renderer debug panels
 */
showDebug():void;

/**
 * Clear what is currently rendered
 */
clearView(): void;

/**
 * Show camera controls
 */
showControls():void;

/**
 * Hide camera controls
 */
hideControls(): void;

/**
 * Hide expand button (pass in false to unhide)
 */
hideExpand(hide: boolean=true): void;

/**
 * Reset camera to initial position 
 */
resetCamera():void;

/**
 * Set the cubemap textures for reflections off of the object
 * See order below; its very important
 * @param cubemapUrls PX/NY/PZ/NX/PY/NZ
 */
setEmbeddedReflectionCubemap(cubemapUrls:string[]): void;

/**
 * Update the endpoint/api key (if implementing a multi tenant system)
 */
setNewEndpoint(endpoint:string, apiKey:string, clientId:string, appId:string, webArEndpoint?:string):void;