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.js
and 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.