<epigraph-ar> v2

Version:
2.0.0

Quick Start

You need to import our web component module. We recommend that you do this in the head. It's important that type="module" is specified.


<!-- include this in your `<head>` -->
<script async type='module' src='https://unpkg.com/@epigraph/ar/dist/epigraph-ar.min.js'></script>
    
<!-- to use a specific version, include this in your `<head>`, replace version-number with a specified version -->
<script async type='module' src='https://unpkg.com/@epigraph/ar@{version-number}/dist/epigraph-ar.min.js'></script>
    
<!-- Use it just like other HTML Elements -->
<epigraph-ar sku="valid-epigraph-product-sku" ua-code="your-valid-ua-code" viewer-visible></epigraph-ar>

Usage

You can insert <epigraph-ar> elements anywhere you'd like. <epigraph-ar> currently serves two purposes:


  1. View in your space: you can embed a button that will launch an Augmented Reality experience (mobile) or show a QR code modal for the user to scan to launch an Augmented Reality experience (desktop).
  2. 3D Viewer: you can embed a 3D model directly in your page.
  3. Product Tour: you can embed a 3D viewer with hotspots and features info panel directly in your page.

You can use these features in combination, or in isolation, depending on the attributes specified for the element.

Properties

arButtonModeAttribute

Valid options are mobile desktop or none. none will disable the "View in your space" button entirely. mobile and desktop can be used to control device-specific button visibility and should be separated by a space if both are desired.

Default:
"mobile desktop"
Type:
String
Attribute:
button-mode
arModes

sets ar modes for the ar experience webxr/scene-viewer - android quick-look - iOS

Default:
"scene-viewer quick-look"
Type:
String
Attribute:
ar-modes
autoStart

used to load the 3D viewer automatically on desktop

Default:
FALSE
Type:
Boolean
Attribute:
auto-start
cameraOrbit

Requires viewer-visible to be true. Used to set the starting orbital positioin of the camera, the values in the string point to, respectively, azimuthal angle, polar angle, and radius from the model center.

Default:
"55deg 69deg auto"
Type:
String
Attribute:
camera-orbit
canActivateAR

Asynchronous public getter method to get ar-capability status

Default:
N/A
Type:
Boolean (readonly)
Attribute:
N/A
interactionPromptThreshold

modifies amount of idling time before interaction prompt appears

Default:
3000
Type:
Number
Attribute:
interaction-prompt-threshold
materialVariantSelectorVisible

sets visibility of material variant selector

Default:
FALSE
Type:
Boolean
Attribute:
material-variant-selector-visible
posterBackground

sets the source url for the poster background, requires the attribute "viewer-visible" to be true

Default:
""
Type:
String
Attribute:
poster
posterForeground

Requires viewer-visible to be true. Used to specify a 3D icon overlaying the poster. If the default value is not overwritten, a default 3D icon will be provided.

Default:
""
Type:
String
Attribute:
poster-foreground
productTourVisible

sets visibility of product tour, requires the attribute "viewer-visible" to be true. Product tour elements such as hotspots or info panel are not meant to be visible in AR

Default:
FALSE
Type:
Boolean
Attribute:
product-tour-visible
shadowIntensity

Requires viewer-visible to be true. Used to set the shadow intensity of the model.

Default:
1
Type:
Number
Attribute:
shadow-intensity
sku

Insert your product code/item no. for specifying which spinner to load (from our DB). This is a reactive attribute, so changing the sku attribute will force a spinner reload.

Default:
"null"
Type:
String
Attribute:
sku
uaCode

Insert your ua-code for google analytics in order to send analytics event to your dashboard.

Default:
" "
Type:
String
Attribute:
ua-code
verboseLogging

Used to log debugging information

Default:
FALSE
Type:
Boolean
Attribute:
verbose-logging
viewerVisible

Sets visibility of the 3D viewer. This attribute is required to be true for any 3D viewer related usages.

Default:
FALSE
Type:
Boolean
Attribute:
viewer-visible

Methods

dismissPoster

Public method to dismiss viewer poster. Note that the behavior of the viewer can be affected depending on which loading behavior you have the viewer set. This will be addressed in a future version.

Type:
Void
showPoster

Public method to show viewer poster. Note that in some instances, if you show poster after the model has loaded, certain UI elements can still be seen. This will be addressed in a future version.

Type:
Void

Events

epigraph-ar-capability-determined

Custom event to indicate whether the device is AR capable. Note that this event may not be the most reliable way to determine AR capability, this will be addressed in a future version as we learn more about <model-viewer>.

Type
CustomEvent<{ canActivateAr: boolean; }>
epigraph-invalid-product

You can register to this event from <epigraph-spinner> to know if <epigraph-spinner> has failed to fetch a valid product.

Type
epigraph-valid-product

You can register to this event from <epigraph-spinner> to know when <epigraph-spinner> has successfully fetched a valid product. You can leverage this event to enable custom actions that should only happen for products with epigraph spinners.

Type

Slots

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Styling