Attaching multiple 3D players


I am having trouble attaching multiple threekit 3D players onto a carousel in a single page.

When attempting to add multiple players each with a unique asset, some of the players shows the same duplicated asset. I checked that each div has it’s own unique id and attached the players accordingly.

Appreciate the help. Thanks!

Hey @felixxx - a way to load multiple players on a single page is to trigger the loading at specific times and re-initializing the player when you want to see the next asset.

Our player is performant enough for this to not to disrupt the experience, you can find an example of the player behaving this way here - fill in the forms with any information to get to the 3D experience.

I would approach it by adding an event listener to the carousel and detect which position it is in and then loading the appropriate asset. Something to keep in mind (it is hard to find in our docs, I apologize) is to know that you will have to uninitialize the player before changing assets by running window.player.unload(). This is to ensure your currently loaded player completely removes itself from the window.

If you do it this way and experience longer than desired load times, please post in #3d for advice on how to optimize your 3D setup. Let me know if I can help further!