Preparing the latest guides, releases, and feature request updates.
Loading guides
Preparing the right Knowledge Base content for this platform.
3D Visualization best practices for conversion | Chamevo Support Center
3D Visualization best practices for conversion
Optimize your 3D product previews for faster loading, better customer experience, and higher conversion rates.
Updated April 28, 20265 min read
3D Visualization can increase conversion rates by up to 30% — but only if the experience is fast, intuitive, and adds genuine value. A slow-loading, poorly configured 3D preview does more harm than good. This guide covers practical techniques to get the most from 3D product previews.
Model optimization
Keep file sizes small
Every kilobyte of model data adds to the initial load time. Customers on mobile connections notice delays above 2–3 seconds.
Component
Target size
How to reduce
FBX model
Under 2 MB
Reduce polygon count, remove hidden geometry, use binary FBX
HDR environment map
Under 1 MB
Use 1024 × 512 resolution. Higher does not visibly improve product previews
Normal maps
Under 500 KB each
Use 512 × 512 or 1024 × 1024 resolution. Compress as PNG
Total model folder
Under 4 MB
Combined target for fast loading on mobile
Reduce polygon count without losing quality
Most product shapes can be represented with 5,000–15,000 polygons. A coffee mug does not need 50,000 polygons — the extra geometry is invisible at product preview sizes but doubles the load time.
In Blender, use the Decimate modifier to reduce polygons. Set it to a ratio (e.g., 0.5) and check that the shape still looks smooth. Enable smooth shading to let lower-poly models appear curved.
Delete any geometry that customers will never see:
Interior surfaces (inside a mug, inside a box).
Bottom faces that are always hidden from the default camera angle.
Construction geometry or helper objects left from modeling.
Every hidden polygon still costs GPU time and file size.
Print area setup
Match aspect ratios exactly
The most common visual issue with 3D previews is design distortion caused by mismatched aspect ratios between the canvas print area and the model's print area.
Before launching a product with 3D preview:
Note the model's print area ratio from config.json (e.g., 800 × 600 = 4:3).
Set the canvas print area to the same ratio (e.g., 1200 × 900, 800 × 600, or any 4:3 dimensions).
Preview the product and add a test design with straight horizontal and vertical lines. If lines appear curved or stretched on the 3D model, the ratios do not match.
Use higher print area resolution for sharp textures
The print_area dimensions in config.json control the texture resolution applied to the 3D model. Higher values produce sharper designs at the cost of GPU memory.
Product type
Recommended print_area
Why
Mugs, bottles (small visible area)
800 × 600
Small surface — moderate resolution is enough
T-shirts, apparel (large visible area)
1200 × 1600
Large surface needs more pixels to avoid blur
Phone cases (detailed designs)
1000 × 1800
Customers zoom in on detail-heavy products
Placement strategy
Match placement to product type
The placement affects how prominently the 3D preview features in the buying experience.
Product type
Best placement
Reasoning
Products with distinctive shape (mugs, bottles, helmets)
Inside Product Designer (Panel) or Before Product Designer
The shape IS the product — show it prominently
Flat products (t-shirts, posters, cards)
Inside Product Designer (Overlay)
The design is the focus, not the shape. 3D adds context but should not dominate
Products sold by shape + design (phone cases, shoes)
Inside Product Designer (Panel)
Both the design and the 3D shape matter. Show them side-by-side
Desktop vs mobile considerations
On desktop, the Panel placement provides an effective split view — canvas on one side, 3D model on the other. On mobile, the same Panel layout stacks vertically, pushing the canvas and 3D preview into narrow sections.
For stores with 70%+ mobile traffic, consider the Overlay placement. It gives the full screen width to the canvas and lets customers tap to expand the 3D preview when they want it.
Material settings
Dial in metalness and roughness
These two config.json values control how the product surface looks:
Material
Metalness
Roughness
Example
Matte ceramic (mugs)
0.0–0.1
0.7–0.9
Coffee mug, plant pot
Glossy plastic (phone cases)
0.0–0.1
0.2–0.4
Phone case, hard plastic bottle
Metal (water bottles, tumblers)
0.7–1.0
0.2–0.5
Stainless steel bottle, aluminum can
Fabric (t-shirts, bags)
0.0
0.9–1.0
T-shirt, tote bag, cap
Getting these values right makes the difference between a convincing product preview and a plastic-looking mockup. Test with a neutral gray material color (decimal: 13421772 for #CCCCCC) first to isolate the metalness/roughness effect, then switch to your actual product color.
Choose the right environment map
The HDR environment map determines the lighting and reflections on your product. The wrong environment makes products look artificial.
Environment type
Best for
Neutral studio (soft, even lighting)
Most products. Safe default choice
Bright outdoor
Products that benefit from natural light (sportswear, outdoor gear)
Warm indoor
Home goods, kitchenware, cozy products
High-contrast studio
Metallic products where strong reflections highlight the material
Avoid complex environments (city streets, landscapes) for product previews — the reflections distract from the product itself.
Color linking for interactive products
If your product has parts that customers can personalize by color (shoe panels, hat sections, case trim), use Color Link 3D Layer to connect canvas color elements to 3D model meshes.
How to set up color linking
In your 3D model, give each colorable part a distinct mesh name (e.g., upper, sole, laces).
In the Product Builder, select a design element that controls a color choice.
In the element properties, set the Color Link 3D Layer field to the corresponding mesh name.
When the customer changes that element's color, the 3D model part updates to match.
This creates a direct visual feedback loop: the customer picks a color, and the 3D model immediately reflects the change. For products like custom shoes or multi-color accessories, this dramatically increases engagement.
Performance tips
Pre-test on actual mobile devices
The 3D preview renders using WebGL, which varies in performance across devices. Before launching:
Test on a mid-range Android phone (the most common customer device class).
Test on a 2–3 year old iPhone.
Check that the model loads within 3 seconds on a 4G connection.
Verify smooth rotation (at least 30 frames per second).
If performance is poor, reduce the model polygon count and HDR resolution.
Use auto-rotate sparingly
Auto-rotation makes the model spin continuously. While it draws attention, it can annoy customers who are trying to inspect a specific angle. Customers tend to prefer controlling the rotation themselves.
If you do enable auto-rotate, the rotation stops as soon as the customer interacts with the model, so it works as an initial attention-getter.
Monitor page load impact
Use your browser's Network panel to check the total transfer size when a 3D product page loads. If the model files push total page load above 10 MB, optimize the model files:
Compress the FBX with fewer polygons.
Downsize the HDR to 1024 × 512.
Remove unused normal maps.
Common mistakes
Using the same model for differently shaped products
A mug model used for a tumbler looks wrong — the proportions do not match. Each distinct product shape needs its own 3D model. Do not stretch one model to fit multiple products.
Ignoring mobile users
A 3D preview that looks great on a desktop monitor but lags on a phone costs you sales. Mobile is where most of your customers are. Test and optimize for mobile first.
Overcomplicated models
Models with 100,000+ polygons, multiple 4K textures, and complex materials look impressive in a 3D portfolio but are not appropriate for web product previews. Customers want fast, functional previews — not cinematic renders.
Not matching the print area ratio
Distorted designs undermine the entire purpose of 3D preview. Always verify that the canvas print area ratio matches the model print area ratio before launching a product.
