Player initialisation

Install the Polyte Player on your website.

  1. Import the Polyte Player script module in the header or body of your website:
<script type='module'>
    import 'https://cdn.polyte.cloud/PolytePlayer.js'
</script>
  1. Now add the Polyte Player itself by adding the following HTML markup where you want the 3D visualization to appear:
<polyte-player app-key=AppKey ></polyte-player>
  1. You should now be able to see the 3D model on your website.

The Polyte player is a web component and can be encapsulated in any other HTML element - e.g. <div> ... </div>. The player then automatically adapts to the size of the container.

—— > ??

Initialisation

Polyte-Player can be initialized via attributes, passed to it’s HTML Tag.
Currently Polyte-Player supports following start parameters:

start-variant="[ ]"
(expects a string array of variants/partnumbers, and displays the initial variant)

start-camera=""
(expects a string as name of camera, and sets the initial camera position)

e.g.

<polyte-player
  app-key='XXXXXXXXXXX'
  start-variant="['option_01','option_02','...']"
  start-camera="exampleCamera"
></polyte-player>

Onloaded Callback

Depending on the size of the scene and connectivity, it could take a few (micro)seconds for the scene to be loaded. Polyte-Player can trigger a callback function, to inform the client, that the scene has been fully loaded.

This callback can be used, e.g. to end progress bars, show/hide/enable/disable HTML elements like buttons, or perform other actions.

The callback function can be set to the Polyte-Player, by using the onloaded="" attribute.

  1. Define the Function to be triggered
function onSceneIsLoaded () {
  // further code
}
  1. Pass the function to the ‘onloaded’ attribute
<polyte-player
  app-key=XXXXXXXXXXX
  onloaded="onSceneIsLoaded"
></polyte-player>

After the scene has been rendered, the callback function will be triggered.