How do I listen to the player for loaded status with JS API?

Development
1

Can you please provide a sample snippet of code that shows how to listen to changes in the loading state of the player. For example when switching asset ids and general player initialization? Documentation mentions something about phases but there is no example of how to listen and what to listen for those changes.

1 Like
2

Which Threekit environment are you working in? You can un-initialize the Threekit player with window.player.unload() in preview & admin-fts environments.

Here is some code examples for executing code at different phases, I hope this is helpful:

const player = await window.threekitPlayer({
  assetId,
  authToken,
  el,
});

window.player = player;

// Avoid typos by referencing the phase constants
const { PRELOADED, LOADED, RENDERED } = player.scene.PHASES;

player.on(PRELOADED, () => {
  console.log(PRELOADED);
});

player.on(LOADED, () => {
  console.log(LOADED);
});

player.on(RENDERED, () => {
  console.log(RENDERED);
});

Let me know if you have any other questions!

3

Thanks the Phase code snippet worked great for me, thanks!

I think I am in a dev env. When my code is in prod can I do unload()? The client has 2 models with two different assetIds. I need to switch between the two model assetIds via JS API. From a user experience point of view what is the most frictionless way to switch between the two model assetIds in a production env? Right now I am just calling window.threekitPlayer over again but with the changed assetId.

4

You can determine which environment you’re in based on how you link to the Threekit Player, where is your src tag pointing? <script src="https://preview.threekit.com/app/js/threekit-player.js"></script> preview being the env. We’ve just made some minor changes to our envs and how they are updated, preview & admin-fts have the window.unload() functionality.

When I have to swap out assets I typically will call the window.unload() function and then re-initialize the player with window.threekitPlayer as you said with the new assetID.

5

yep://preview.threekit.com/app/js/threekit-player.js

When my project goes to production and uses production threekit-player can i also use unload() there?

6

Got it, thanks! You are totally fine to use unload() - it is only unavailable in our environment that is receiving hotfixes moving forward, anyone on it is being migrated to our new env. Your dev & production environments will have it.