3D Experience in Mobile E-Commerce: Design and Performance Guide

Mobile-First 3D Design

The majority of e-commerce traffic comes from mobile devices. Therefore, designing the 3D product experience for mobile first, then adapting to desktop, is the right approach.

Touch Interaction Design

• Single finger drag: Horizontal and vertical rotation. Ensure no conflict with page scrolling.
• Two-finger pinch: Zoom in and out. Set minimum and maximum zoom limits.
• Double tap: Reset to default view or zoom into focus point.

Key design decision: resolve the conflict between the 3D viewer area and page scrolling. Page scrolling should be disabled when touching the viewer area and work normally outside it.

Performance Optimization

Model Optimization

• Keep polygon count below 20,000 for mobile
• Limit texture sizes to 1024x1024 maximum
• Reduce file size with Draco compression
• Add detail through normal maps, not polygons

Loading Strategy

1. Start with a poster image - customer sees the product while the model loads in the background
2. Use progressive loading - show a low-quality model immediately, load high-quality later
3. Do not load before visible on screen (lazy loading)

Responsive Sizing

model-viewer {
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* Square ratio */
  max-height: 500px;
}

Battery and Heat

Continuous 3D rendering consumes battery and can cause heating on mobile. Stop auto-rotate animation when there is no user interaction and minimize the render loop.

Conclusion

Mobile 3D experience can be as effective as desktop with proper design and optimization. The key is accounting for mobile device constraints from the start of the design process.