Changing player mode based on product layout

Hello, I’m currently working on setting up different product layouts. For every product so far I’ve used a 2d player but for the newest one I need it to be in 3d. I’ve noticed that I can update the player mode in player.config.js to webgl but that will used for every product. Is there a way to update the player mode when a specific product layout is loaded?

Hi @Danielle_Ince -

You are right that player.config.js will set global settings for your players. Do your 2D/3D products share configurator forms or are they different products with different attributes?

Hi @Will, the 3D product has completely unique attributes but the 2D products do share a couple of attributes.

Got it, thank you. The reason I ask is because if they shared attributes using the Product Layout wrapper might be helpful. It might be worth looking into if they do share some attributes.

Otherwise you may be able to specify the correct options in the Player Config for the 2D products and provide that configuration to the ThreekitProvider component depending on a condition. For example, one way I have done it:

<ThreekitProvider
   playerConfig={{
     display: 2dProduct ? 'image' : 'webgl'
   }}
>
   <Player/> 
   // other components
</ThreekitProvider>

Let me know if this is helpful. If this doesn’t accomplish what you need I will find a Treble expert :slight_smile:

Ok, so I think I misunderstood your original question. I am using a unique Product Layout wrapper for each product. Should I just provide the same playerConfig object to the Product Layout component? Also is there any documentation on the setting the player config this way, when I looked I couldn’t find it.

Hey Danielle, thanks for the info! I am asking our product team the best way to go about loading different experiences with a multi-product setup as I’m not sure that the ProductLayout component is able to ingest a playerConfig object. Thanks for your patience while I look into it!