@spiffcommerce/preview-ar-plugin

Preview AR Plugin

This is a plugin for Preview for enabling ARKit and ARCore support, using the Google Model Viewer.

Usage

1. Install preview and this plugin: yarn add @spiffcommerce/preview @spiffcommerce/preview-ar-plugin
2. 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();
}