Skip to main content

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 and provide a button to launch a virtual try on experience allowing the user to see themselves wearing the model in augmented reality. It makes use of Vyking's vyking-apparel custom HTML Element (see Virtual Try-On Custom HTML Element for more details). 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
vto
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"
vto-config="../assets/config/modeld.foot.bin"
vto-key="io.vyking"
vto-autocamera-width="640"
vto-autocamera-height="360"
>
</model-viewer>

Examples

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.

Attributes

NameDescriptionType
vtoEnable the virtual try on (VTO) button.Boolean
vyking-srcReplace the standard "src" attribute with this one to load the model defined by the Vyking offsets.json file referenced by the given url.URL
vto-configThe configuration file that will be used by the VTO experience.URL
vto-keyThe configuration key that will be used by the VTO experience.String
vto-autocamera-widthThe ideal camera width the VTO will use when automatically managing the camera.Number
vto-autocamera-heightThe ideal camera height the VTO will use when automatically managing the camera.Number
vto-autocamera-frame-rateThe ideal camera frame rate the VTO will use when automatically managing the camera.Number
vto-autocamera-facing-modeThe camera facing mode the VTO will use when automatically managing the camera.environment or user
vto-flipyIf specified the VTO image will be mirrored by flipping about the Y axis.Boolean
vto-rotateSpecify this when the VTO camera needs rotating. This is typically when an external camera needs to be rotated from landscape to portrait.Boolean
vto-statsEnable the Three.js statistics element and console logging of internal timings for the VTO.Boolean
vto-debugEnable VTO debug features such as showing the various canvases used.Boolean
vto-lens-factorAdjust the VTO zoom factor used when rendering the image. Zooming in slightly allows the virtual apparel to still be seen when the tracked body part appears to be nearly outside the camera's field of view. Values less that 1.0 zoom in and values greater than 1.0 zoom out.Float
vto-shareEnable the VTO share feature. This uses the navigator.share facility, if supported.Boolean
vto-share-qualityThe VTO's share feature generates an 'image/jpeg' image of the rendered canvas using the Canvas.toDataURL method. The share-quality attribute is used as the method's quality parameter.Float, 0.0 to 1.0 (inclusive)
** vto-status**This read-only attribute enables DOM content to be styled based on the status of the VTO presentation (see the vto-status event for possible values).Boolean

Events

NameDescription

vto-status

A CustomEvent reporting the change of status of the VTO. Possible values are:

  • 'not-presenting'
  • 'presenting'
  • 'presenting-qrcode'
  • 'failed'

VTO Global Configuration

Declare the VTO's global configuration object (self.HTMLVykingApparelElement) early if you wish to change any of the default values (see Virtual Try-On Custom HTML Element for more details).