Salesforce Lightning Web Components

In order to embed Threekit into a Lightning Web Component (LWC) the Threekit JS must be the bundled version https://preview.threekit.com/app/js/threekit-player-bundle.jsand uploaded to Salesforce as a Static Resource.

šŸš§

RegeneratorRuntime

In order for Threekit to load, you must declare regeneratorRuntime as undefined in your code before the embed. The code example also assumes the JS is uploaded to Salesforce as a .zip window.regeneratorRuntime = undefined

import { LightningElement } from 'lwc';
import bundle from '@salesforce/resourceUrl/bundle';

export default class Test extends LightningElement {
  renderedCallback () {
    window.regeneratorRuntime = undefined
    // call script loaders...
    Promise.all([loadScript(this, bundle + '/bundle-js-file-name.js')])
      .then(() => {
        window
          .threekitPlayer({
            authToken: '35002e37-f973-4482-8ebe-7177d34cecd9',
            el: this.template.querySelector('.tkplayer'),
            assetId: '4e9c0441-74d2-4b44-8f78-f43ef907a6e0',
            showConfigurator: false,
            showAR: false,

          })
          .then(async player => {
            window.player = player
            this.configurator = await player.getConfigurator()
          })
      })
      .catch(error => {
        console.log('Threekit Error', error)
      })
  }
}

šŸš§

CSP Policies

Be sure you allow the Threekit environment through Salesforce's CSP policy.