Snapshot settings

[Toni-hr98]

I’m working on a 3D configurator for an e-commerce website. When adding a configuration to the cart, I generate a snapshot. However, the snapshot’s dimensions and resolution are inconsistent across different devices and screen sizes.

Problems 1. On mobile screens, the snapshots appear pixelated due to the smaller screen size. 2. On desktop, if the window is resized before taking a snapshot, I sometimes get only half of the configurator in the snapshot.

Desired Solution

I need a way to capture snapshots with a fixed width, height, zoom level, and camera position, ensuring a consistent and high-quality output regardless of screen size.

Question

Is there a way to set up a fixed scene/environment in my 3D configurator so that every snapshot is taken under the same conditions? Any guidance or best practices would be greatly appreciated!

[repalash]

Hi, when clicking a snapshot, the size of the exported image is the current render size of the canvas.

To get a fixed render size in exports, you can set the render size just before exporting with - https://threepipe.org/docs/classes/ThreeViewer.html#setrendersize'

Then after export, reset to fill the container by calling setSize without any parameters.

I will try to make an example for this soon.

[Toni-hr98]

Thanks, @repalash

I’ll try this out and see how it works in my setup. An example would still be much appreciated whenever you get the chance!

Thanks for the help

[repalash]

Hey, usage of this added to the example - canvas-snapshot-plugin, have a look at the code of the example. You can also change the camera settings before and after the export.

Also a dedicated example for the usage of setRenderSize is also added here- https://threepipe.org/examples/?q=size#viewer-render-size/

You can close the issue if that answers your question.