Trying to have multiple entities on the same page at the same time

[jbailey]

We have come into a use case where we will have a player that can either switch between four different assets or have 4 players each with their own asset, but we are unable to do so. We’re trying to do something similar to this picture and be able to switch between the different articles of clothing:

The issue is that the threekit player only seems to want to load one asset on a page and cannot change without a full page reload. We are working with the React Treble library but I was unable to make a proof of concept in the standalone JS library as well. Are there any examples for this sort of workflow? Is this even possible?

[Will]

Hey @jbailey - since you’re working with the Treble app I’ll give you some guidance on that. Our Treble docs are due for some updates so I can understand the frustration - thanks for coming to the forum for help!

The Treble library should have access to an unload method:

window.threekit.player.unload()

This will simply uninitialize the player, allowing you to reinitialize a new asset by calling the window.threekitPlayer method and providing a config object:

window.threekitPlayer({
    assetId: ASSET_ID,
    authToken: AUTH_TOKEN,
    el: document.getElementById('threekitplayer')
})

You can of course pass any other parameters available to you. I believe the standalone JS version would work similarly, the only difference is that the unload method would be available wherever the player API is stored. Typically that’s window.player.

Can you let me know if this is helpful?