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?
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.
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.
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• .
Value:…
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
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.
@Will Is there a way to reload the player through Treble? Using the window.threekitPlayer method does not allow the children components that we have wrapped in the Player component to be rendered when the player is reloaded.
Hey @joe.deak - are you reloading the player with a different asset than what was displayed previously? Treble has support for Multi-Product experiences, let me know if this is helpful or not.
