Attributes

Attribute	Type	Default	Description
append-modal	boolean	false	when enabled, appends epigraph-ar to the main body upon launching the fullscreen modal on iOS devices, then re-appends it to its last location upon closing it (this is useful for conflicts with certain slideshows, such as SwiperJS)
ar-modes	string	"scene-viewer quick-look"	sets AR modes for the AR experience: • "webxr" or "scene-viewer" - android • "quick-look" - iOS
ar-placement	string	"floor"	sets the AR placement for the AR experience: • "floor" - places the 3D object on the floor • "wall" - places the 3D object on the wall
auto-start	boolean	false	used to automatically dismiss the poster and load the 3D model upon page load on desktop
camera-orbit	string	"55deg 69deg auto"	sets the viewer camera orbit angles
disable-mobile-fullscreen	boolean	false	used to disable fullscreen functionality on mobile devices
environment-image	string	"neutral"	sets environmental lighting: • empty string - default scene optimized for load speed • "neutral" - applies even lighting on all sides • HDR Image URL - supply your own HDR image source url to apply custom lighting
exposure	number	1	controls the exposure of the 3D model and the skybox, for use primarily with HDR environments
ga-measurement-id	string		sets the measurement ID for Google Analytics 4 event tracking
interaction-prompt-threshold	number	3000	modifies the amount of time before the interaction prompt/nudge appears
internal-measurements-visible	boolean	false	sets visibility of internal 3D model measurements
max-camera-orbit	string	"auto 100deg auto"	sets the maximum camera orbit follows the format for Euler Angles, with the string values corresponding to roll(θ) yaw(φ) radius(r) in order respectively
measurement-unit	string	"imperial"	sets which measurement system to use for internal measurements (if internal-measurements-visible is true) • "imperial" - uses the imperial system • "metric" - uses the metric system
min-camera-orbit	string	"auto 0deg auto"	sets the minimum camera orbit follows the format for Euler Angles, with the string values corresponding to roll(θ) yaw(φ) radius(r) in order respectively
minimum-render-scale	number	0.5	sets ability to set minimum render scale for low-end devices
mobile-poster-foreground	string	the value of poster-foreground	sets the source URL for the poster foreground/icon image on mobile devices
orbit-sensitivity	number	1	sets the orbit sensitivity takes any number, negative values reverse camera orbit direction
poster	string		sets the source URL for the poster background image
poster-foreground	string		sets the source URL for the poster foreground/icon image
shadow-intensity	number	1	modifies the shadow intensity of the 3D model
show-poster-on-close	boolean	false	sets the ability to reset the 3D Viewer to the poster upon closing fullscreen on an android device
sku	string		sets the sku corresponding to the epigraph experience
stop-touch-propagation	boolean	false	modifies whether touch events on the 3D Viewer propagate outside of it
tabindex	number	1	sets the tab index of the `<model-viewer>` element
theme	string	"default"	used to indicate UI/UX themes
ua-code	string		sets the measurement ID for Google Analytics 3 (or Universal Analytics) event tracking
verbose-logging	boolean	false	used to log debugging information
viewer-visible	boolean	false	sets visibility of the 3D Viewer

Attribute Example

This example shows how to use the sku, viewer-visible, and ar-modes attributes:

<epigraph-ar
	sku="INSERT-SKU"
	viewer-visible
	ar-modes="scene-viewer quick-look"
></epigraph-ar>

CSS Custom Properties

CSS Property	Description
--progress-ring-color	edits the progress ring/loading circle color
--progress-ring-radius	edits the progress ring/loading circle radius
--progress-ring-thickness	edits the progress ring/loading circle thickness

CSS Custom Property Example

This example sets the AR button active background color custom property to blue:

epigraph-ar {
     --progress-ring-color: blue;
 }

CSS Shadow Parts

Shadow Part	Description
default-poster-background	points to the default poster background image
default-poster-foreground	points to the default poster foreground image/icon
model-viewer	points to the `<model-viewer></model-viewer>` element
poster-foreground	points to the poster foreground image/icon
viewer-modal-exit-button	points to the mobile fullscreen exit button
webxr-banner	points to the webxr banner
webxr-banner-text	points to the text section of the webxr banner
webxr-banner-name	points to the banner section of the webxr banner
webxr-banner-pdp	points to the url text below the name in the text section of the webxr banner
webxr-banner-visit-button	points to the visit button in the webxr banner

CSS Shadow Part Example

This example sets the width and height of the default-poster-background CSS shadow part to 100px:

epigraph-ar::part(default-poster-background) {
    width: 100px;
  	height: 100px;
}

Slots

Slot	Description
poster	replaces the entire viewer poster, including the poster-foreground and poster-background
poster-foreground	replaces the poster foreground
poster-background	replaces the poster background
mobile-poster-foreground	replaces the poster-foreground on mobile devices
progress-bar	replaces the progress indicator/loading circle
viewer-modal-exit-button	replaces the mobile fullscreen exit button

Slot Example

This example sets the 3D Viewer's poster slot to a new image element. This will allow you to fully override what displays before the model is ready and interacted with:

<epigraph-ar>
     <img slot="poster" src="insert-image-src"/>
</epigraph-ar>

Events

Event	Type	Description
epigraph-ar-capability-determined	`CustomEvent<{canActivateAr: any;}>`	custom event to indicate whether the device is AR capable or not
epigraph-ar-loading-error	`CustomEvent<{message: any; stack: any;}>`	custom event to bubble up the model load error event from model-viewer, inheriting message and stack
epigraph-ar-model-loaded		custom event to bubble up the model loaded event from model-viewer

Event Usage Example

This example listens for the epigraph-ar-model-loaded event on the first instance of epigraph-ar on your page:

let arElement = document.querySelector('epigraph-ar');
arElement.addEventListener('epigraph-ar-model-loaded', (e) => {
  console.log('Model Loaded');
});

Methods

Method	Type	Description
closeModal	`():void`	public method to close the fullscreen modal on iOS devices
dismissPoster	`():void`	public method to dismiss the 3D Viewer poster
launchFullscreen	`():void`	public method to launch fullscreen on android devices, or launch the fullscreen modal on iOS devices
showPoster	`():void`	public method to reset the 3D Viewer to the poster

Method Usage Example

This example shows how to call the showPoster method on the first instance of epigraph-ar on your page:

<script>
  let arElement = document.querySelector('epigraph-ar');
	arElement.showPoster();
</script>