@spiffcommerce/preview-ar-plugin
v1.5.0
Published
Spiff Commerce Preview plugin for Augmented Reality
Downloads
17
Keywords
Readme
Preview AR Plugin
This is a plugin for Preview for enabling ARKit and ARCore support, using the Google Model Viewer.
Usage
- Install preview and this plugin:
yarn add @spiffcommerce/preview @spiffcommerce/preview-ar-plugin
- Import the plugin and register it with preview:
import { ARPlugin } from '@spiffcommerce/preview-ar-plugin';
// Create the preview service
const previewService = new SpiffCommerce3DPreviewService({
// ... preview options
});
const arPlugin = new ARPlugin({
// This function should parse the elementString and return a promise that resolves to an HTMLElement
createModelViewer: (elementString: string): Promise<HTMLElement> => {},
// Optional array of mesh names to ignore when exporting the model
ignoredMeshNames: ['mesh1', 'mesh2'],
// Optional map of metadata fields to ignore when exporting the model. The key is the field name, and the value is an array of values to ignore.
ignoredMetadataFields: new Map([['field1', ['value1']], ['field2', ['value2']]]),
// This function should insert the given scripts into the DOM
insertScripts: (sources: string[]): void => {},
// This function should upload the given file to your server and return a promise that resolves to the url of the uploaded file
storeFile: (file: File): Promise<string> => {},
});
// Initialize the preview service
await previewService.initialize({
// ... preview initialization options
});
// Plugin can be registered before or after the preview service is initialized
previewService.registerPlugin(arPlugin);
if (arPlugin.arSupported()) {
await arPlugin.generateModel(true);
arPlugin.launchAR();
}