...
| Code Block |
|---|
|
const url = await pregenerated.getGlb(sku, LOD._1024); |
Using the Multi-Product Web AR Component
You can use the multi-product component that accepts SDK settings in the component constructer and returns the AR asset as a URL string or a QR code. Examples below.
| Code Block |
|---|
const component = new MxtMultiWebArComponent(id, options);
id: id value of HTMLElement
options: {
skus: string[],
pids: string[],
lod: LOD,
arSettings: {
apiKey: '',
clientId: '',
serviceEnvironment: MxtAssetEnvironment,
assetEnvironment: MxtAssetEnvironment
}: MxtWebArOptions
}; |
Getting the AR asset URL
| Code Block |
|---|
const containerId = 'ar-container-id';
const container = document.createElement('div');
container.id = containerId;
const options = {
skus: ['123', '123'],
pids: ['abc', 'abc'],
lod: LOD._1024,
arSettings: {
apiKey: 'keyhere',
clientId: 'idhere',
serviceEnvironment: MxtAssetEnvironment.LATEST as MxtAssetEnvironment,
assetEnvironment: MxtAssetEnvironment.LATEST as MxtAssetEnvironment
}
};
const iosQrViewer = new MxtMultiWebArComponent(containerId, options);
iosQrViewer.generate(WebArType.USDZ).then(() => {}); |
Getting the AR asset QR code
| Code Block |
|---|
const containerId = 'ar-container-id';
const container = document.createElement('div');
container.id = containerId;
const options = {
skus: ['123', '123'],
pids: ['abc', 'abc'],
lod: LOD._1024,
arSettings: {
apiKey: 'keyhere',
clientId: 'idhere',
serviceEnvironment: MxtAssetEnvironment.LATEST as MxtAssetEnvironment,
assetEnvironment: MxtAssetEnvironment.LATEST as MxtAssetEnvironment
}
};
const iosQrViewer = new MxtMultiWebArComponent(containerId, options);
iosQrViewer.generate(WebArType.USDZ, { getQr: true }).then(() => {}); |
...