3D Viewer Custom HTML Element

Introduction

Vyking have extended Google's model-viewer to load its 3D model, and some other properties such as the environment image, from a Vyking offsets.json file. This documentation describes these extensions and should be read in conjunction with Google's model-viewer documentation.

Quick Start

// Import the component
<script
  type="module"
  src="https://sneaker-window.vyking.io/vyking-model-viewer/model-viewer.min.js"
></script>

<!-- Use it like any other HTML element -->
<model-viewer
  ar
  alt="Yeezy Boost"
  camera-controls
  touch-action="pan-y"
  vyking-src="https://sneaker-window.vyking.io/vyking-assets/customer/vyking-io/yeezy_boost_700_carbon_blue/offsets.json"
>
</model-viewer>

Examples

A collection of Virtual Try-on & 3D Model viewer examples

Memory and CPU Usage

Due to the nature of AR and 3D graphics both the VTO and 3D viewer can have high demands on both memory and CPU. This needs to be considered when deploying on mobile devices as they have limited memory and cpu resources. The use of iframes helps encapsulate the viewers and ensures greater release of memory when the iframe is closed. If memory or CPU usage is still an issue then popup windows, which appear as tabs on mobile devices, can be considered.

Releases

3.1.1-1.6 First documented release
3.1.1-1.7 Remove console.logs from minified version
3.3.0-1.7 Merge upstream version 3.3.0
3.3.0-1.8 Added support for future features.
3.3.0.1.10 Set some default values for attributes not set by the legacy offset.json files.
3.3.0.1.11 Reduced memory footprint from the GLB object.
3.3.0.1.12
- Add "web-share 'self': privilege to the VTO iframe.
- Stopped setting vyking-apparel's default-exposure, default-tone-mapping or default-environment-image attributes.
- Set vyking-apparel's config-key attribute instead of it deprecated key attribute.
3.3.0.1.13
- Added support for the vyking-apparel's share decoration attributes.
- Fixed a VTO memory leak.
3.3.0.1.14
- Now dispatch an error event with detail.type set to "loadfailure" when the loading of the offsets.json file fails.
3.3.0.2.1
- New default progress loader.
- Added support for displaying dimensions.
- Added support for view changing toggle buttons.
- Support a specific property in the offsets.json file to specify the GLB model to load.
3.3.0.2.2
- Added support for signed urls for offsets.json files and its resources.
- Fixed an issue where the code was looking for "environmentImage-viewer" instead of "environmentImage_viewer" in the offsets.json file.
3.3.0.2.3
- Fixed a regression bug where the model didn't reload after a VTO session finished.
3.3.0.2.4
- Minor fix to make the play button visible if the user declines camera permission for the VTO.

Attributes

Name	Description	Type
vyking-src	Replace the standard "src" attribute with this one to load the model defined by the Vyking offsets.json file referenced by the given url.	URL

Introduction​

Quick Start​

Examples​

Memory and CPU Usage​

Releases​

Attributes​