Changing the view from 2D to 3D in 3D Player

Is there a way to change the view in the 3D player so a user can configure a product in 2D, and view the configured product in 3D?

The desired behavior for the player is:

  • Load in 2D, player displaying 2D by default
  • Thumbnails change with fabric configuration to reflect the options
  • Clicking the thumbnails will put that static image of the configured product in the player at the selected angle
  • 360 view allows you to grab and rotate all the way around, viewing top and bottom of the configured product (We have the 3D models as well as renders for the products to support this).

I’ve also attached is a photo of how the thumbnails and a 360 view thumbnail would ideally look. We’re open to other options, we’re just struggling to find a way to switch from 2D to 3D views in the same player. Do you have any suggestions?

Hi @ekinkopf - do your 3D and 2D items share an Asset ID or are they separate assets? That will help inform on the best path forward. Let me know!


They share an Asset ID.

Great, thank you! We’re off-site having our Company Kick-Off this week, we’ll have an example for you soon - thanks in advance for your patience.

Thanks for your patience @ekinkopf

To switch the player from a 2d mode into 3d mode when an asset shared the same asset ID, you would have to run the player.unload() player being whatever variable you tied your player API to.

Once you’ve unloaded the player, you can reinitialize the player as normal using the new updated display property.

Unfortunately, the player cannot instantly be switched between 2d/3d modes, it has to be unloaded & reinitialized - it’s a limitation of the platform. Please let me know if this is helpful!

Hi @Will The suggested implementation by did not worked for me.
Threekit is currently being embedded using Treble, so I used the tools provided by Treble to unload , reload and launch the project and although I can successfully unload the threekit player and use the corresponding tool to reload it; it does not allow me to launch the threekit player with different settings so I can switch from vray to webgl.

Do you have any other suggestions?

Can you describe what steps you’re taking and happens when you re-initialize the Treble player? Do you get errors or does something else happen? You should be able to switch between players if they share an assetID.

I have enabled a button on the page so that when it is clicked. I am executing a specific function that is in charge of unloading and reloading the Threekit player. This flow works perfectly but the issue is that the reloading tool provided by Threekit does not allow me to switch to webgl, since there is no configuration it let me pass in as a parameter to be able to do so. So, instead of using the reload tool I used the launch tool which is the one that allow to pass the required parameters, I did code as suggested by Typescript and I am executing this tool after unloading Threekit player first and it gives me the following error on the browser console (see image):
A non-serializable value was detected in the state, in the path:
configurator. materialData. e. handleSeIect• .
After that Threekit player stays in an unloaded state and I am not being able to reload it so that I can switch from vray to webgl

Can you elaborate or share a snippet of the reload tool you’re using?

The display embed parameter will allow you to switch between webgl/2d players: image will load the 2D player, webgl will load the real time 3d player.

Here are some additional images, let me know if you need more information.

Since we are not using javascript vanilla, but react and treble; we cannot use the scripts provided to us in that documentation, that is why we are relying on the tools provided by the Treble plugin, which is being used as shown in the images

I see now that the display parameter is missing from the Treble parameters. Although you are using treble, the vanilla Threekit APIs are still available to you and you should have access to window.threekitPlayer object that is used to initialize the player.

If using that method to re-initialize the player throws off the lifecycle or other parts of the application I will ask engineering team for additional support.